top 10 buttons

There are 10 main button types described in this utimate css button post. Those buttons are standard button that signify actions and easily customizeable and easiy t0 setup  . A nice collection of beautiful css3 buttons with animation effects that are created with the help of web designer easy to find more creative ideas on web design buttons.

The effect on the buttons is created using the box-shadow and linear-gradient properties. There are two gradients used basically, one is linear and the second one is radial to make the effect much nicer.

1. Series Of simple CSS Buttons

button

A series of simple CSS buttons. They are easy to customize and use. Can easily be integrated with Font-Awesome or other icons library to bring it out more.

2. CSS3 Hexagon Buttons

button

CSS3 Hexagon Buttons created with pure CSS3 and also used javaScript for flexibility. Four Different button size hexagon buttons integrated with Font Awesome. Ease to use and customize.

3. Purely CSS Buttons

button

Some CSS buttons I worked on for a project. They are very easy to use and customize. It does not include any transition to keep going with the simplicity concept.

4. CSS3 Buttons With Icons

button

Multi colored simple CSS3 buttons with icons. These icons are also made using CSS3 techniques to create shapes. The body of the button consists of two divs (one for container and other for the main body itself) which animates nicely on hover with the use of CSS3 transition property. This transition effect will not work in Internet Explorer as it doesn’t support the transitions yet.

5. Google Buttons

button

Google style buttons submitted by David Higgins. They are created by using the CSS3 properties like border-radius, gradients, text-shadow and box-shadow. They also have a very nice :hover and :active states.

6. Hover Wipe Buttons

button

I’m 150% positive this is the only way to achieve this exact effect. Much sure. So confidence. Wow

7. Obvious Buttons – Almost Flat CSS3 Buttons

button

A repost of a bunch of CSS buttons I found on GitHub, made by @skidding. Planning to contribute on developing this project further. It would mean a lot if you guys could check these out and give suggestions on what can be improved.

8. Download Btn’s for the Ghostlab app website

button

Testing download buttons for the Ghostlab app website. The live site has has a few fixes for cross browser bugs and converted to Less, for smaller screens the “download” button has been hidden.

9. Long-Shadow Radio Buttons

button

An attempt to give flat buttons some depth. Let me know what you think! (Part of a series)

10. Flat UI Buttons 2

button

Flat UI 3D buttons using border-bottom for the 3d shadow effect. (Part of my button bootstrap – Awesome Buttons Bootstrap

 

 


Post Tags


About The Author


Leave a Reply

Your email address will not be published. Required fields are marked *