3D CSS Rollover Buttons Without Images
It turns out it’s not that hard to create the illusion of a 3D rollover button using nothing more than CSS and no images. Play the video below to watch over my shoulder as I do it.
Color Scheme Generator 2:
http://www.wellstyled.com/tools/colorscheme2/index-en.html
The CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | input.subscribeButton { font-family: Arial, Helvetica, sans-serif; color: #333333; font-weight: bold; border: 2px solid; padding: 2px 5px 2px 5px; border-color: #D9D4C3 #BFBBAC #BFBBAC #D9D4C3; background-color: #FFFAE6; } input.subscribeButton:hover { border-color: #BFBBAC #D9D4C3 #D9D4C3 #BFBBAC; } input.subscribeButton:active { background-color: #807D73; color: #FFFFFF; } .center { text-align: center; } |
The HTML:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <form method="post" action="#"> <table><tbody> <tr> <td>Name:</td> <td><input name="name" size="20" type="text" /></td> </tr> <tr> <td>Email:</td> <td><input name="from" size="20" type="text" /></td> </tr> <tr> <td class="center" colspan="2"><input class="subscribeButton" style="cursor: pointer" name="submit" value="Subscribe Now!" type="button" /></td> </tr> </tbody></table> </form> |
