Stumble Digg Technorati Delicious

Glossy Buttons Without Images Using Only CSS3

Specifications change, they get revised and updated and sometimes, just sometimes they improve upon the existing set that they are designed to replace. I’ve been waiting a long time for cross-browser support of CSS3 and we are getting closer and closer every day, but who knows when exactly this will happen.

Here is a teaser at the top of the post instead of making you read all the way to the bottom to see what this can do. This works in every major browser except IE, so if you are using Internet Exploder I recommend you try Firefox, Google Chrome or Safari :-)

No Images!!

In case any of you have no idea what I am talking about, CSS2 is basically outdated and antiquated but its the “best we have” at the present moment so its what is used. In the upcoming CSS3 set of standards there are so many new abilities, features and options that will be available for designers to utilize, I just can’t help but get excited by it.

For this post i am going to put out a quick example showing just one possibility that is available using CSS3. Everyone loves a nice rounded, shiny, glossy web 2.0 button on a page right? Up until now that meant having some better than average photoshop skills and a bit of work, well that’s no fun now is it? I’m going to outline how you can accomplish this without using any images at all.

In CSS3 there are more options available for shadows, gradient backgrounds, highlighting and all the groovy things needed to make these awesome buttons. First we start off by making a div that will be our image-less button:

[php]
<div id="shiny-blue" class="css3-button">No Images!!<span></span></div>
[/php]

Then we start styling it, the css for this can be pretty in-depth so I will save that for another tutorial but the meat and potatoes of it all requires the following to implement the elements needed to make this button:

[css]

.css3-button {

position:relative;

display:inline-block;

width:8em;

padding:0.25em 0.5em 0.3em 0.5em;

text-align:center;

cursor:pointer;

border:2px solid #999;

background-color:#666;

background-color:rgba(128,128,128,0.75);

-moz-border-radius:16px;

-webkit-border-radius:16px;

-opera-border-radius:16px;

-khtml-border-radius:16px;

border-radius:16px;

font-size:1.5em;

color:#fff;

font-weight:bold;

text-shadow:1px 1px 3px rgba(0,0,0,0.5);

background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(64,64,64,0.75)), to(rgba(192,192,192,0.9)));

-khtml-box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;

-moz-box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;

box-shadow:rgba(192,192,192,0.75) 0px 8px 24px;

}

.css3-button span {

position:absolute;

display:block;

width:94%;

left:3.5%;

top:0px;

height:50%;

-webkit-border-radius:8px;

-moz-border-radius:8px;

background-color:rgba(255,255,255,0.25);

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(255,255,255,0.75)), to(rgba(255,255,255,0)));

}

#shiny-blue {

border-color:#6699cc;

background-color:rgba(64,128,192,0.75);

background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(16,96,192,0.75)), to(rgba(96,192,255,0.9)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(16,96,192,0.75)), to(rgba(96,192,255,0.9)));

-khtml-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

-moz-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

}

#shiny-blue:hover {

border-color:#003575;

background-color:rgba(0,97,216,0.75);

background-image:-webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(0,97,216,0.75)), to(rgba(0,53,117,0.9)));

background-image:-moz-linear-gradient(top,bottom,from(rgba(0,97,216,0.75)), to(rgba(0,53,117,0.9)));

-khtml-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

-moz-box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

box-shadow:rgba(128,192,255,0.75) 0px 8px 24px;

margin: 0 5px 0 5px;

}

[/css]

In conclusion, this is just the tip of the ice berg of what CSS3 is capable of, I can’t wait to be able to utilize it in my work (will save me a pile on graphics work)    :-0)