Rollover button tutorial

Mr. Downs
Web Design II
B Block
Tutorial – Custom Buttons CSS/HTML

This Tutorial covers the CSS and HTML of making your own custom button, as seen in
the picture above. (Left)
________________________________________________________________________
CSS: Below is the CSS code. Notice that the button used in this code is only the
background, while the actual button on top of that layer will be placed into the HTML
code. In other words, the image “button4.png” is the image that appears when you
rollover the button with your mouse. The code below also can format the size of your
button as it appears on your page, which is done in the first section of the code. The CSS
code below can go anywhere within the internal CSS section of your code. Make sure
not to interrupt any other existing code and end this, if it is not there already, with the tag
of <style>. Take time to perfect the code below for it will decide all the details of the
button, from text to size.

.cssnav
{
position: relative;
font-family: arial, helvetica, sans-serif;
background: url(button4.png) no-repeat;
white-space: nowrap;
display: block;
width: 150px;
height: 50px;
margin: 0;
padding: 0;
}

.cssnav a
{
display: block;
color: #000000;
font-size: 11px;
width: 150px;
height: 50px;
display: block;
float: left;
color: white;
text-decoration: none;
}

.cssnav img
{
width: 150px;
height: 50px;
border: 0
}

* html a:hover
{
visibility:visible
}

.cssnav a:hover img
{
visibility:hidden
}

.cssnav span
{
position: absolute;
left: 35px;
top: 15px;
margin: 0px;
padding: 0px;
cursor: pointer;
}

HTML: This is the HTML section of the code. This can go into any div class of your
webpage, but is most commonly used in the left column. The code below is just the
simplified version, the bolded text applies to just one button, but this code can be
repeated multiple times for different buttons. The two tags on each side of the bolded
code are just opening and closing tags. The “title” section is purely the name of the link
you are going to, but is not official. The “span” section is the actual text which will
appear on the button. The “alt” section is just the same name as title. Be careful when
putting the text together below, and don’t forget the opening and closing tags. Also, if
not already there, don’t forget to put in the ending div tag “</div>.”

<div class="cssnav"><a href="index.html" title="Search Engine
Optimization"><img src="button3.png" alt="Search Engine Optimization"
/><span>Home</span></a></div>



This is the end of this Tutorial.

Rollover button tutorial

More Related Content

Viewers also liked (20)

Similar to Rollover button tutorial (20)

More from Daniel Downs (20)

Rollover button tutorial