0
Shares
0
0
0
0

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:
Share 0
Tweet 0
Pin it 0
Share 0
Share 0
Share 0
Share 0

At the same time, I can’t think of anything more satisfying than sitting in front of TV, eating take-away, lights down low, in my pyjamas and watching crap on TV. Basically, I strive to live a balanced life. Fun. Serious. Fast. Slow. Brainy. Bimbotic. Intense. Lazy. You get the drift.

Leave a Reply

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

fourteen − nine =

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

— Previous article

Social sharing buttons - Socialite.js

Next article —

8 Credit / Debit Card Icons

You May Also Like
DDesign

How to design a beautiful CSS3 search form

  • byMark
  • December 3, 2012
Search box on site is one of the elements most frequently used. If you want to improve user experience in a simple way, and make it easy to search and find content for your users, then you have to add a search form on your website.
CCSS

Border-radius: create rounded corners with CSS!

  • bySGH
  • May 2, 2012
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.
CCSS

Cross-browser CSS3 box-shadow

  • bySGH
  • November 25, 2011
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).