HTML and CSS Reference
The border of the button is easily created with a
border:1px solid #90c8d4; property and the rest of the
font styling is very simple, as well ( font, text-decoration,
color etc. ).
Remember that both states of “ btn ' are in the same
First part is the default state and the secondary part
is for the :hover state to show whenever you move the
cursor on it.
While you could have moved them in two separate
files, two issues would have arrised:
• you need to download two separate images, thus
adding an other resource to download;
• a flash of white background would appear when
:hover is activated because only when you activate
the :hover state, you actually download that image.