CSS
Raiting:
7

Selection of 10 buttons of CSS3


Every day new standards of CSS3 and HTML5 enter more deeply into the life of web designers and web developers, and the browsers are becoming more compatible with these standards.

image

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

1. Super Awesome Buttons.

image

This set of buttons uses a set of CSS3 and coloring of RGBA.

It is not difficult to add this set of buttons to our page; we should connect the CSS’ template and add the necessary categories to the links in order to change their color, shape and so on.

Connecting 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>


More about Super Awesome Buttons

2. Google Buttons.

image

These buttons were based on the home page of Google.com. They are also simple and easy to understand.

Connecting example:

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


More information about Google Buttons

3. CSS3 Gradient Buttons.

image

The buttons are very similar to Super Awesome Buttons that are mentioned above. This set represents the several colors (9 colors) and different forms.

Connecting example:

Rectangle or
Rounded Can be
Medium or
Small
<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>


More information about CSS3 Gradient Buttons

4. Kick-Ass CSS3 Button.

image

This button is not the most interesting from a design standpoint, but we will find the video tutorials on the creating similar buttons from the link below that will be helpful for the beginning web-designers.

More information about Kick-Ass CSS3 Button

5. Pure CSS Social Media Icons.

image

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

Connecting example:


More information about Pure CSS Social Media Icons

6. Extremely Fancy CSS3 Buttons.

image

All owners of iOS devices undoubtedly learn these buttons; they are present in iOS devices starting with the first versions. These buttons like many others presented here have the settings of color, size, and they are made on pure CSS3.

Connecting example:

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


More information about Extremely Fancy CSS3 Buttons

7. BonBon: Sweet CSS3 Buttons.

image

Are you born as a sweet tooth? Then these buttons are invented for you. They are made in that way that you just want to eat them, or eventually use in your project. No doubt you would like the different colors, shapes, conditions.

Connecting example:

Label
More information about BonBon: Sweet CSS3 Buttons

8. Realistic Looking CSS3 Buttons.

image

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

Connecting example:

Pushit
More information about Realistic Looking CSS3 Buttons

9. Simple CSS3 Github Buttons.

image

Realization of these buttons we have seen before on github.com, they are very easy to install, comfortable and simple. It is also possible to add icons to the buttons.

Connecting example:

This is a Button
This is a Pill Button
Divide by Zero

More information about Simple CSS3 Github Buttons

10. Flexible CSS3 Toggle Buttons.

image

These buttons of CSS3 are made very cute, but they are not practical, because, they only support Firefox, unfortunately, other browsers are not supported.

Connecting 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>


More information about Flexible CSS3 Toggle Buttons
Tags: button, CSS3, html5
Siera 15 september 2011, 12:02
Vote for this post
Bring it to the Main Page
 

Comments

Leave a Reply

B
I
U
S
Help
Avaible tags
  • <b>...</b>highlighting important text on the page in bold
  • <i>..</i>highlighting important text on the page in italic
  • <u>...</u>allocated with tag <u> text shownas underlined
  • <s>...</s>allocated with tag <s> text shown as strikethrough
  • <sup>...</sup>, <sub>...</sub>text in the tag <sup> appears as a superscript, <sub> - subscript
  • <blockquote>...</blockquote>For  highlight citation, use the tag <blockquote>
  • <code lang="lang">...</code>highlighting the program code (supported by bash, cpp, cs, css, xml, html, java, javascript, lisp, lua, php, perl, python, ruby, sql, scala, text)
  • <a href="http://...">...</a>link, specify the desired Internet address in the href attribute
  • <img src="http://..." alt="text" />specify the full path of image in the src attribute