<html>
<head>
<title>Div example</title>
</head>
<body>
<style type="text/css">
.button1 {
background-color: #ff0000;
border: 2px #ff0000 outset;
padding: 1px 4px; /* top, bottom: 1px, left, right: 4px */
color: #000000;
text-decoration: none;
font: bold 10px Verdana;
}
.button1:visited, .button1:active{
color: #ffffff;
text-decoration: none;
font: bold 10px Verdana;
}
.button1:hover{
color: #ffffff;
text-decoration: none;
font: bold 10px Verdana;
border-style: inset;
background-color: #0000ff;
padding: 2px 3px 0px 5px; /* shift text 1px to the right and down */
}
.button2 {
background-color: #00ff00;
border: 2px #00ff00 outset;
padding: 3px 7px; /* top, bottom: 3px, left, right: 7px */
color: #000000;
text-decoration: none;
font: bold 10px Verdana;
}
.button2:visited, .button2:active{
color: #ffffff;
text-decoration: none;
font: bold 10px Verdana;
}
.button2:hover{
color: #ffffff;
text-decoration: none;
font: bold 10px Verdana;
border-style: inset;
background-color: #0000ff;
padding: 4px 6px 2px 8px; /* shift text 1px to the right and down */
}
.button3 {
background-color: #0000ff;
border: 2px #0000ff outset;
padding: 5px 9px; /* top, bottom: 5px, left, right: 9px */
color: #000000;
text-decoration: none;
font: bold 10px Verdana;
}
.button3:visited, .button3:active{
color: #ffffff;
text-decoration: none;
font: bold 10px Verdana;
}
.button3:hover{
color: #ffffff;
text-decoration: none;
font: bold 10px Verdana;
border-style: inset;
background-color: #ff0000;
padding: 6px 10px 4px 8px; /* shift text 1px to the right and down */
}
</style>
<a href="https://www.mobilefish.com" class="button1">Button 1</a>
<a href="https://www.mobilefish.com" class="button2">Button 2</a>
<a href="https://www.mobilefish.com" class="button3">Button 3</a>
</body>
</html>