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 *

five × three =

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.
CCSS3

Create CSS3 dropdown menu

  • byMark
  • December 3, 2012
how to create your own CSS3 dropdown menu, without any additional Javascript code. There are no images used and, as usual, minimal HTML markup.
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.
TTools

Useful CSS3 Tools

  • bySGH
  • April 7, 2011
CSS3 getting more and more popularity in more and more websites. However, there are still those out there that are holding out on learning it and using it. This is probably due to the fact that it’s not fully supported yet in all browsers.