Welcome to Bucaro TecHelp!

Bucaro TecHelp
HTTPS Encryption not required because no account numbers or
personal information is ever requested or accepted by this site

About Bucaro TecHelp About BTH User Agreement User Agreement Privacy Policy Privacy Site Map Site Map Contact Bucaro TecHelp Contact RSS News Feeds News Feeds

Create a No Image Rollover Button or Badge

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.

RSS Feed RSS Feed

Follow Stephen Bucaro Follow @Stephen Bucaro


Fire HD
[Site User Agreement] [Privacy Policy] [Site map] [Search This Site] [Contact Form]
Copyright©2001-2024 Bucaro TecHelp 13771 N Fountain Hills Blvd Suite 114-248 Fountain Hills, AZ 85268