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


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


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


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


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


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


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


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


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


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

10. Flat UI Buttons 2


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 *