CSS3 Buttons – a set of scalable CSS3 gradient buttons created with pure CSS , without any image or Javascript.

The buttons are scalable based on the font-size, button size and rounded corners can be adjusted by changing the font size and padding values.

The buttons can be applied to any HTML element such as div, span, input, button,  div, a, p, h2, etc. with fallback – if CSS3 is not supported, it will display a regular button just without gradient and shadow.

What Is So Cool About These Buttons?

  • Pure CSS: no image or Javascript is used.
  • The gradient is cross-browser supported (IE, Firefox 3.6, Chrome, and Safari).
  • Flexible and scalable: button size and rounded corners can be adjusted by changing the font size and padding values.
  • It has three button states: normal, hover, and active.
  • It can be applied to any HTML element: a, input, button, span, div, p, h3, etc.
  • Fallback: if CSS3 is not supported, it will display a regular button (no gradient and shadow).

Demo: http://www.webdesignerwall.com/demo/css-buttons.html

0 Shares:
Leave a Reply

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

16 − 8 =

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

Cross-browser CSS3 box-shadow

Simple way for creating cross-browser box-shadow in all modern and popular browsers including Internet Explorer (Opera only since 10.50 pre-alpha version).

Border-radius: create rounded corners with CSS!

The CSS3 border-radius property allows web developers to easily utilise rounder corners in their design elements, without the need for corner images or the use of multiple div tags, and is perhaps one of the most talked about aspects of CSS3.

Create CSS3 dropdown menu

how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup.