Create a No Image Rollover Button or Badge
By Stephen Bucaro
In this article, I show you how to create a nice looking button or badge with a rollover
effect that requires no image because it uses CSS (Cascading Style Sheets). I think
you'll find that this is amazingly simple to do. The first thing to do is place the code for
the button or badge in the body section of your webpage. The html code for this example
is shown below.
<div class="badge">
<a title="Bucaro Techelp" href="http://bucarotechelp.com">Bucaro Techelp</a>
</div>
Note that the code creates an html div element and that the opening tag has
the class attribute which applies a CSS class named "badge". We want to use
a class so that we can style multiple buttons or badges on the page to look and act the
same. Inside the we put code the html code for a link. In this example the link title is
"Bucaro Techelp", the link URL is the link to the home page of this site, and the link text
is Bucaro Techelp.
What's the difference between a "button" and a "badge". There is no difference really,
except a button is usually a thin rectangle with a link, and a badge can be any shape, even
a starburst shape, and it may or may not have a link.
The next thing to do is place the CSS code for the button or badge in a style block in
the head section of your webpage. The CSS code for this example is shown below.
<style type="text/css">
.badge
{
width:100px;
height:20px;
padding:4px;
font-family:verdana;
font-size:12px;
border-style:outset;
border-color:#009000;
background-color:#66ff66;
box-shadow: 6px 6px 4px #a0a0a0;
}
.badge:hover
{
border-style:inset;
background-color:#e5ff23;
}
</style>
Note the code has two sections delineated by curly braces. Most of the style rules to define
the button or badge are in the first section. The second section combines the class with the
:hover pseudo-class. This section defines rules that will apply only when the mouse pointer
is hovering over the div.
Note: It's called a pseudo-class because it doesn't apply to an html element the way a
class would, instead it applies to an elements event, i.e. the mouse pointer hover event.
Most of the CSS rules are self-explanatory, i.e. width, height, font-family, but I want to go
over some of them so that you can set the style rules to design the button or badge exactly to
your specifications. The first rule I want to go over is: box-shadow: 6px 6px 4px #a0a0a0
The syntax for the box-shadow rule is shown below.
box-shadow: horizontal-offset vertical-offset blur-size shadow-color;
The only thing I can say here is don't be afraid to experiment with different values to what they do.
| 
About BTH
User Agreement
Privacy
Site Map
Contact
News Feeds
RSS Feed
Follow @Stephen Bucaro
General Web Design
