A selection of 10 css3 buttons

Every day, new css3 and html5 standards are becoming more and more deeply involved in the life of web designers and web developers, and browsers are becoming more compatible with these standards every day.



In connection with this event, I would like to present you a selection of 10 css3 buttons that can make your life easier during the layout and creation of web applications.

1. Super Awesome Buttons.

This set of buttons uses the css3 set as well as the RGBA coloring book.
')
Adding this set of buttons to your page is not difficult, you need to connect the css template and add the necessary classes to the links in order to change their color, shape, etc.

Connection example:

<a class="large awesome">Super Awesome Button »</a> <a class="large blue awesome">Awesome Blue Button »</a> <a class="large magenta awesome">Awesome Magenta Button »</a> <a class="large red awesome">Awesome Red Button »</a> <a class="large orange awesome">Awesome Orange Button »</a> <a class="large yellow awesome">Awesome Yellow Button »</a> 

Read more about Super Awesome Buttons »

2. Google Buttons.

The basis of these buttons was taken home page Google.com. They are also simple and minimalist.

Connection example:

 <button type="submit" class="g-button">Search Google</button> <a class="g-button">I'm Feeling lucky</a> 

Learn more about Google Buttons »

3. CSS3 Gradient Buttons.

The buttons are very similar to the Super Awesome Buttons mentioned above. This set is presented in several colors (9 colors) and various shapes.

Connection example:

 <a href="#" class="button black">Rectangle</a> or <a href="#" class="button black bigrounded">Rounded</a> Can be <a href="#" class="button black medium">Medium</a> or <a href="#" class="button black small">Small</a> <input class="button black" type="button" value="Input Element" /> <button class="button black">Button Tag</button> <span class="button black">Span</span> <div class="button black">Div</div> <p class="button black">P Tag</p> <h3 class="button black">H3</h3> 

Read more about CSS3 Gradient Buttons »

4. Kick-Ass CSS3 Button.

This button is not the most interesting from the point of view of design, but from the link below you can familiarize yourself with the video tutorial on creating such buttons, which will be useful for novice web developers.

More about Kick-Ass CSS3 Button »

5. Pure CSS social media icons.

This set is a set of social networking icons, rather than buttons. The set is represented by ten icons of social networks including Facebook, Twitter, Flickr and others.

Connection example:

 <ul> <li class="facebook"><a href="#non" title="Share on Facebook">Facebook</a></li> <li class="twitter"><a href="#non" title="Share on Twitter">Twitter</a></li> <li class="rss"><a href="#non" title="Subscribe to the RSS feed">RSS</a></li> <li class="flickr"><a href="#non" title="Share on Flickr">Flickr</a></li> <li class="delicious"><a href="#non" title="Bookmark on Delicious">Delicious</a></li> <li class="linkedin"><a href="#non" title="Share on LinkedIn">LinkedIn</a></li> <li class="google"><a href="#non" title="Bookmark with Google">Google</a></li> <li class="orkut"><a href="#non" title="Share on Orkut">Orkut</a></li> <li class="technorati"><a href="#non" title="Add to Technorati">Technorati</a></li> <li class="netvibes"><a href="#non" title="Add to NetVibes">NetVibes</a></li> </ul> 

Read more about Pure CSS social media icons »

6. Extremely fancy CSS3 buttons.

All owners of iOs devices undoubtedly recognize these buttons, similar buttons are present in iOs devices since the first versions. These buttons, like many presented here, have color, size settings and are made on pure css3.

Connection example:

 <a class="fancy_button" href="#"> <span style="background-color: #070;">Post</span> </a> 

More on Extremely fancy CSS3 buttons »

7. BonBon: Sweet CSS3 buttons.

Are you a born sweet tooth? Then these buttons are designed for you. They are made so that they just want to eat, or in the end to apply in your project. Different colors, shapes, conditions you will definitely like.

Connection example:

 <a href="" class="button orange glossy">Label</a> 

Learn more about BonBon: Sweet CSS3 buttons »

8. Realistic Looking CSS3 Buttons.

An interesting set of buttons, strict colors, curves, certainly deserves attention.

Connection example:

 <a href="#" class="button">Pushit</a> 

Read more about Realistic Looking CSS3 Buttons »

9. Simple CSS3 Github buttons.

You have already seen the implementation of such buttons earlier on github.com , they are very easy to install, convenient and minimalist. It is also possible to add icons to the buttons.

Connection example:

 <a href="#" class="button">This is a Button</a> <a href="#" class="pill button">This is a Pill Button</a> <a href="#" class="negative button">Divide by Zero</a> 

Read more about Simple CSS3 Github buttons »

10. Flexible CSS3 toggle buttons.

These Css3 buttons are very nice, but not practical, they are implemented only with Firefox support, other browsers are not supported.

Connection example:

 <div class="toggleOnleft">on</div><div class="toggleOFFright">off</div> <div class="toggleOFFleft">on</div><div class="toggleONright">off</div> <div class="toggleDisabledleft">on</div><div class="toggleDisabledright">off</div> 

Read more about Flexible CSS3 toggle buttons »