CSS3 Text-Based Jelly Buttons

by James Cook on September 21, 2010

The CSS3 and HTML5 standards which are slowly working their way towards completion are generating a lot of excitement among web designers and developers. The most recent update to Dreamweaver CS5 incorporates code hinting for CSS3 but you don't need DW CS5 to create these buttons and, in any case, you'll still have to get into the code to create the style rules.

 

CSS3 "jelly bean" web buttons

Oregon Website Design
In this tutorial I'll demonstrate a relatively simple application of CSS3, creating a text-based, “jelly bean” button that will demonstrate the promise – and the pitfalls – of using an emerging website design technology.

Create the Link

We'll begin with a simple link. In the HTML, it looks like this:

<a href="http://www.studiojmc.com"
class="shinyButton">Oregon Website Design
<span></span></a>

It looks like this: Oregon Website Design

The only non-standard element of the link is the empty span tag I've added after the text of the link. We'll use some CSS magic later to transform that span into the highlight of our button.

Turn the link into a button

Now we'll use some old-fashinoned CSS2 to turn our text link into a button.

.shinyButton, .shinyButton:visited {
      display:block;
      width:15em;
      position:relative;
 }  

I've chosen to set both the normal and the visited states in one rule since I want the button to look the same whether or not the linked page has been visited.

The display block property causes the link to behave as a block element (think div). That way the complete link, including padding will be a "live" area, not just the text. The width must be set, otherwise the link area will extend the full width of its containing element.

I've also set the position property. That won't have any effect on the appearnce of the link but later it will allow us to absolutely position our highlight span within the link button.

"Decorate" the button

.shinyButton, .shinyButton:visited {
      display:block;
      width:15em;
      position:relative;
      font-size:1.5em;
      font-weight:bold;
      text-decoration: none;
      padding:0.1em;
      background-color:#0033FF;
      color:#FFFFFF;
      border:2px solid #666;
      text-align:center;
      text-shadow:1px 2px 3px #000;
 }

I haven't done anything special here with the exception of using the text-shadow property which, even though it's part of the CSS2 standard, wasnt' widely implemented until recently. The parameters of the text-shadow property are: offset-right, offset-down, blur and color. To move the shadow up or to the left use negative values for the offset-right and offset-down parameters. To make make the shadow more blurry increase the value of the blur parameter.

For older browsers and IE that don't support the text-shadow property, using it will have no effect. Here's a live version of our button as it should appear now.
Oregon Website Design

The rollover

Before I add the CSS3 styles to "jellify" our button, I'm going to take care of the hover (rollover) and active (when clicked) states of the button by adding two styles.

.shinyButton:hover {
     background-color:#787878;
     border:2px solid #4F77AD;
 }
 .shinyButton:active {
     background-color:#69232C;
     border:2px solid #333;
 }

As you can see, all I'm doing is changing the button's background-color and border color for the hover and active states. Now the button should turn blue on rollover and red when clicked. Here's a functioning version of the button in it's current state. Feel free to click on it, the link is non-funtional.
Oregon Website Design

Rounding the corners

Now it's time to add the CSS3 style to add the WOW! to our button. We'll begin by adding the rounded corners to the .shinyButton style rule using the CSS3 property

 .shinyButton, .shinyButton:visited {
     display:block;
     width:15em;
     position:relative;
     font-size:1.5em;
     font-weight:bold;
     text-decoration: none;
     padding:0.1em;
     background-color:#0033FF;
     color:#FFFFFF;
     border:2px solid #666;
     text-align:center;
     text-shadow:1px 2px 3px #000;
     border-radius:12px;
     -webkit-border-radius:12px;
     -moz-border-radius:12px;
}

The pitfalls of using an emerging web technology like CSS3 are beginning to become apparent. While the standard for the border-radius property has been evolving, some browser creators have gone ahead with their own implementation in the latest versions. These browser-specific styles are accessed by adding a suffix beginning with a hypen to the property name. Therefore the -webkit-border-radius property is specific to web-kit based browsers (Safari, Chrome and Dreamaweaver's Live View) and -moz-border-radius is specific to Mozilla-based browsers (Firefox). So we need to include both of those properties as well as the actual CSS3 property border-radius (for all future CSS3-compliant browsers) property. Notice that the values for these properties are identical. The nice thing about these properties is that they will just be ignored by browsers that don't support them (older versions and, you guessed it, IE).

BTW, you can specify the radius for each corner by specifying a top, right, bottom and left value (in that order) just as you would for padding or margin.

Add a drop shadow

Once again it will take three property specifications to add our drop shadow (or box-shadow to use the proper term).

 .shinyButton, .shinyButton:visited {
     display:block;
     width:15em;
     position:relative;
     font-size:1.5em;
     font-weight:bold;
     text-decoration: none;
     padding:0.1em;
     background-color:#0033FF;
     color:#FFFFFF;
     border:2px solid #666;
     text-align:center;
     text-shadow:1px 2px 3px #000;
     border-radius:12px;
     -webkit-border-radius:12px;
     -moz-border-radius:12px;
     box-shadow:4px 4px 10px rgba(0, 0, 0, .5);
     -webkit-box-shadow:4px 4px 10px rgba(0, 0, 0, 0.5);
     -moz-box-shadow:4px 4px 10px rgba(0, 0, 0, .5);
}

As with the text-shadow property, the parameters of box-shadow are: offset-right, offset-down, blur and color. To move the shadow up or to the left use negative values for the offset-right and offset-down parameters. To make make the shadow more blurry increase the value of the blur parameter.

Notice that our color specification introduces a new way to specify web colors, rgba (red, green, blue, alpha). The numbers represent the red, green and blue color channels with with 0 representing solid color and 255 representing no color. So 0, 0, 0 represents black and 255, 255, 255 represents white. The fourth value represent the alpha or transparency channel. A value of 1 represents no transparency and 0 represents total transparency.

So, my shadow, will 50% black be offest 4 pixels to the right and down in relation to the button.

Here's a functioning version of the almost complete (non-linking) button (IE users will have to wait for the screen shot at the end of this article). Notice that the border-radius and box-shadow properties are inherited by the hover and active states.
Oregon Website Design

Adding the Highlight

As you may recall, way back at the beginning of this tutorial, I included an empty span tag after the text of our link. Now it's time to convert that span into the highlight of our button. Here's the CSS.

.shinyButton span {
     display:block;
     position:absolute;
     top:0;
     left:2.5%;
     width:95%;
     height:50%;
     background-color:rgba(255, 255, 255, 0.4);
     border-radius:5px;
     -webkit-border-radius:5px;
     -moz-border-radius:5px;
     box-shadow:0 2px 20px rgba(255, 255, 255, 0.5);
     -webkit-box-shadow:0 2px 20px rgba(255, 255, 255, 0.5);
     -moz-box-shadow:0 2px 20px rgba(255, 255, 255, 0.5);
 }

The final button:
Oregon Website Design

And a screen capture of the normal and hover states of the CSS3 "Jelly" button for the browser-impaired.
CSS-Jelly Button

There's a lot going in that style rule so I'll just work my way down the list.

.shinyButton span This selector applies the rule to any span tag within and htnl object to which the style class .shinyButton has been applied.

display:block The span will be treated as a block element so that it can be sized and positioned like a div.

postition:absolute The span will be positioned absolutely. Since we applied the position:relative property in the .shinyButton style rule, the span will be positioned with respect the the link (button) that has that rule applied.

top, left, width and height determine the size and positioning of the span.

  • top:0 positions the span at the top of the button.
  • left:2.5% positions the left edge of the span 2.5% of the way across the button. It also represents half of what's left after we subtract the 95% width of the span from 100% and effectively centers the highlight. You can play with the left and width properties to achieve the effect you want.
  • width:95% sets the width of the span in relation to the button.
  • height:50% effectively confines the span to the top half of the button.

background-color:rgba(255, 255, 255, 0.4) By defining the background-color property using the CSS3 rgba specification we cause non-CSS3-compliant to ignore the background-color property effectively rendering it invisible for those browsers. For other browsers the span will be a semi-transparent white.

border-radius:5px rounds the corners of the span. Once again I was forced to specify the parameter three times to accomodate a variety of browsers.

box-shadow:0 2px 20px rgba(255, 255, 255, 0.5) This time we're specifying a semi-transparent white "shadow" offset 2 pixels down in relation to the span with a lot of "fuzziness" to make the highlight appear less hard-edged. And, of course I had to specify it three times.

That's it!

A "jelly" button using html text and CSS only, no images and no Photoshop required! It's cross-browser compatible even if it isn't as attractive in IE and older browsers. And, best of all, the various states of the button can be changed by just editing the background-color and border properties.

Vision May 15, 2011 at 12:37 pm

Thats strange, I guess my browser didnt like looking at it offline or something It works now.

http://www.webmarketing.hyperphp.com/

jcook May 15, 2011 at 12:45 pm

Glad it’s working for you. It looks good in black. You still might want to clean up the CSS as I suggested below.

And, BTW, I deleted some comments to make it easier for other folks to benefit from our discussion. And, in a WordPress blog you can reply to a Comment by clicking the “REPLY” link below the comment. That way it doesn’t start a new comment thread.

Vision May 15, 2011 at 11:32 am

This is very cool. I have a few problems with this, for some reason after I roundel the button the hover goes away. and the second is that it seems as if the buttons cant be side by side.

jcook May 15, 2011 at 12:39 pm

I guess I should have been cleared in the instructions. You only need one .shinyButton, .shinyButton:visited rule. Each time that rule was repeated you only need to ADD the code in red to the existing code (the order of the styles is important too since the .shinybutton style overwrites the .shinybutton:hove style if it appears after it). So it all comes together to look like this:

.shinyButton, .shinyButton:visited {
display:block;
width:6em;position:relative;
font-size:1.0em;
font-weight:normal;
text-decoration: none;
padding:0.1em;
background-color:#000000;
color:#FFFFFF;
border:2px solid #666;
text-align:center;
text-shadow:1px 2px 3px #000;
border-radius:6px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
box-shadow:4px 4px 10px rgba(0, 0, 0, .5);
-webkit-box-shadow:4px 4px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow:4px 4px 10px rgba(0, 0, 0, .5);
}
.shinyButton:hover {
background-color:#787878;
border:2px solid #4F77AD;
}
.shinyButton:active {
background-color:#69232C;
border:2px solid #333;
}
.shinyButton span {
display:block;
position:absolute;
top:0;
left:2.5%;
width:95%;
height:50%;
background-color:rgba(255, 255, 255, 0.4);
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
box-shadow:0 2px 20px rgba(255, 255, 255, 0.5);
-webkit-box-shadow:0 2px 20px rgba(255, 255, 255, 0.5);
-moz-box-shadow:0 2px 20px rgba(255, 255, 255, 0.5);
}

As for putting the buttons side by side. By default elements with the display:block property display as a single line. To align buttons side by side you need to add a float property such as float:left.

Comments on this entry are closed.

Previous post:

Next post:

Home | Make Contact