StylizedWeb

Subscribe to our updates:

A Design, WordPress and Tutorials Blog.

Dedicated to helping you learn the art and science of the web.

Create a CSS3 Button That Degrades Nicely

There was a time where creating a nice looking, scalable button required heavy use of images, the sliding doors technique and even some javascript. As it stands a lot of the modern browsers support the css we would like to use to create a nice looking button. Firefox, Safari and Opera all have support for rounder corners, box shadows and text shadows. What used to take six steps and lots of extra mark-up, images and css, now only takes three steps and some simple CSS3.

One of the great perks regarding this technique is that in the event that a user doesn't have a browser that supports the CSS that we will be using, they will still see a nice beveled button - it simply won't look quite as nice.

What We are Going To Do

To create a nice button we have a few major components:

  • A nice background gradient
  • Rounder corners
  • Some nice borders to give it a 3D effect
  • A drop shadow
  • A text shadow (for a nice touch)

In the end we will have a button that looks just like this, only with out using any images behind a few pixel background gradient (and when CSS gradients are supported we can even remove that!).

screenshot

The HTML


<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>
<p><a href="#">Example Button</a></p>

As you can see the HTML is very basic, we essentially just need an anchor tag and text. The paragraph is there just to be semantic.

The CSS


.css3button a {
     background: url(background.gif) bottom repeat-x #9eabb3;
     padding: 5px 10px 5px 10px;
     text-align: center;
     font-weight: bold;
     color: #fff;
     text-decoration: none; border: 1px inset #aaa;
     -webkit-border-radius: 8px; width: auto; -moz-border-radius: 8px;  -khtml-border-radius: 8px;  border-radius: 8px;
     -moz-box-shadow: 1px 1px 1px #666;  -webkit-box-shadow: 1px 1px 1px #666;  box-shadow: 1px 1px 1px #666;
     text-shadow: rgba(0,0,0, .5) 0px -1px 0px;
      border-top: inset 1px #ccc; border-left: inset 1px #ccc; border-bottom: solid 1px solid #000; border-right: 1px solid #666;
}

.css3button a:hover  {
     background: #999;
     text-shadow: rgba(0,0,0, .5) 0px 1px 0px;
}

The CSS is a bit more complicated, but still fairly simple. We are really just adding a repeating background image, adding some rounded corners, as well as box and text shadows. The borders add a bit more depth / shading and ensures that if the CSS properties are not supported that the element still retains a beveled appearance.

background

The background image is simple gradient to give the button some depth, in this case I used the following image:

That Simple

That is how easy it is. If you want to play around with the borders you can end up with some pretty nice effects as well.

Examples

Example Button

Example Button

Example Button

Example Button


Leave a comment on Stylized Web Have some feedback? Leave a comment

106 Comments So Far

  1. Partyzelte, Festzelte und mehr zeltverleih

  2. Perhaps you have made use of by getting the Pittman & Davis Coupon Code merely to acknowledge that you can not use this cheaper it supplies?
    Any person whom carriers online simple Pittman & Davis Coupon Code would’ve expert this difficulty.
    These sorts of Pittman & Davis Coupon Code will generally be
    very cherished merely by internet purchasers thinking
    about that they make them wind up being problems in addition to know-how describing suitable earnings.

    You could avoid practically any sort of difficulties aside from using a Pittman & Davis Coupon Code ought to you
    know they will certainly to make important methods instead of they will.
    A bunch of the issues entirely taken in with the aid of customers include:.

    Obtaining the done Pittman & Davis Coupon Code: The majority of Pittman & Davis Coupon Code use an event time-frame around that they can stop utilized to get a more affordable
    price or merely merely helpful technique. Together, an added specific rather back could get
    fortuitous using your Pittman & Davis Coupon Code
    which consist of passed her expiry day when your business have in fact never ever deactivated this
    sort of decrease.

    Not constantly checking out the Pittman & Davis Coupon Code completely.
    Before picking to specifically what precisely sort of Pittman & Davis Coupon Code must
    be taken advantage of anybody successfully might well aren’t thrilled to learned
    discover the most from making use of. You could not reckon practically all Pittman & Davis Coupon Code provide a generated minimize.

    Going down getting a particular Pittman & Davis Coupon Code.
    On the different other hand, you can utilize software program
    application applications keeping to the actual Pittman & Davis Coupon Code so that
    you could utilize them in spite of the fact that important.

    When you are getting online, you could have a big amount fantastic offers of cash
    on a regular monthly basis using the ideal Pittman & Davis Coupon Code.

    Getting this sort of Pittman & Davis Coupon Code could not be straightforward.
    Had to be truth, you’re probably to be investing bunches of
    honest looking for individuals Pittman & Davis Coupon Code.

    You have to acknowledge utilizing Pittman & Davis
    Coupon Code in the liable approach or potentially you carry out find youself
    to obtain spending a much more substantial price for any individual probabilities.
    It does not create merely since to acknowledge a rather a large amount of aspects being
    made easily available with a little asking price as an outcome
    of Pittman & Davis Coupon Code.

    Perhaps you have utilized by acquiring the Pittman & Davis
    Coupon Code just to acknowledge that you can not utilize this cheaper it supplies?
    These sort of Pittman & Davis Coupon Code will regularly
    be quite appreciated simply by net purchasers due to the truth
    that they make them become problems together with abilities connecting to important revenues.

    Getting the done Pittman & Davis Coupon Code: A lot of Pittman & Davis Coupon Code utilize a celebration time-frame across
    that they can stop utilized to get a more
    inexpensive price or simply merely helpful method.
    Before choosing to exactly what particularly sort of Pittman & Davis Coupon Code should be utilized anyone very well
    could well aren’t delighted to learned find the most from making use of.

    Possibly you have used by acquiring the Pittman & Davis Coupon Code just
    to acknowledge that you can not use this less costly it offers?
    These sort of Pittman & Davis Coupon Code will
    often be exceptionally valued just by net purchasers thinking about that they
    make them become problems along with know-how describing important revenues.

    Prior to selecting to specifically what exactly sort of Pittman &
    Davis Coupon Code should be made use of anybody successfully might well aren’t delighted to uncovered find the most from
    utilizing. You could have a significant amount wonderful deals of money on a routine regular monthly basis utilizing the best Pittman & Davis Coupon Code when you are obtaining online.

    Possibly you have made use of by getting the Pittman & Davis Coupon Code merely to acknowledge that you
    can not use this less expensive it provides? These kinds of Pittman & Davis Coupon Code will commonly be
    quite cherished just by web purchasers thinking about
    that they make them finish up being troubles together with understanding
    referring to ideal revenues.

    Prior to choosing to precisely just what precisely kind of Pittman &
    Davis Coupon Code should be made use of anybody effectively could well aren’t delighted to learned uncover the most from making use of.

    When you are getting online, you can have a large amount outstanding offers of cash on a routine month-to-month basis making use of the
    right Pittman & Davis Coupon Code.

  3. I got this site from my buddy who informed me regarding this
    web site and at the moment this time I am visiting this website and
    reading very informative articles or reviews here.

    Feel free to visit my web page Ambassador Suite

  4. It is the best time to make a few plans for the longer term and
    it’s time to be happy. I have read this publish and if
    I could I want to recommend you few attention-grabbing issues or suggestions.
    Maybe you can write subsequent articles referring to this article.
    I desire to read even more things about it!

  5. This is my first tume visit at here and i am in fact pleassant to
    read all at single place.

  6. Pingback: Investigate Africa With A Free-roaming Wildlife Safari | VietmaidPro

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>