Tutorial: Creating CSS Rollover Button

This beginner CSS tutorial will teach you how to create your own pure CSS rollover button, which can be used to link to other pages on your website. See the bottom of the page for complete code and to watch the whole process in our video.

Class .button

This is our main class where we define the overall look of our button we use the following commands for our button.

color:#FFF; Color of the text on the button, we choose #FFF which represents White. background:#F00;Face color of the button, we choose #FF0 which represents Red. float: left;This command floats our button inside the parent containter to the left but also once the float property is defined the size of our button gets resized automatically to fit around the caption on the button. If you wish to have more buttons but you don't want to have the buttons to be different size then in that case you also have to define width and height properties which will set all the instances of button class to same size. padding:5px;Padding property specifies the distance between the text on the button and the border of the button itself. If this property is not set the text on the button will touch the border so it is always recomended to set this property to make the thext more readable. font-family:Arial, Helvetica, sans-serif;Define font family for the text on the button. It is recomended to always use easy to read fonts. font-weight:bold;Make the font on the button bold so it is even more visible and easy to see. border-radius:10px;Give the button more modern look by rounding the corners and make it more visually appealing. border-top: 1px solid #CCC;By adding 1px gray border on the top of the button we give impression of 3D looking button.

Link definition: .button a

In this pseudo class we define on how the hyperlink should behave on our button. Because by default are set to be blue color and have the text in underline we have to override some of those settings to make our button better.

text-decoration:none;With this we remove the underline from hyperlinks which is set by the default CSS stylesheet. color:#fff;We set the color back to white which is what we chose originally.

Rollover behavior .button:hover

In this pseudo class we define how the button will behave when the mouse is rolled over or hovered over the button.

background:#0F0;Change color of the button to green. color:#000;Change color of the text on the button to black.

Complete Code


See it work:

Download the complete code:
Download code in zip file.button.zip

You can also watch this tutorial in the following video:
Video Tutorial: Creating CSS Rollover Button

Published 8/8/2012

Please fill in the form below to receive a free web design, web development or SEO quote.