HTML and CSS Reference
In-Depth Information
Adding them in the same
btn.png
file proves to be the
most effective solution considering that the amount
of text won't change in height, but in width.
It also improves the size of the website by reducing
the images to the minimum size needed (
remember
that we've trimmed at a max width of 2px
) and grouped
into one image,
btn.png
.
After displaying the button, just add the
:hover
state
in the
style.css
by changing the position of
btn.png
background: from
top left
to
bottom left
.
a.btn:hover {
background-position:bottom left;
color:#3b636b;
}
This is going to swap the
btn.png
background and
display the last part of background when the
:hover
state is active.
