<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>