HTML and CSS Reference
In-Depth Information
STYLING THE BUTTONS
Let's set up some basic CSS to style the block in its natural (non-hovered) state:
.hover-panel
{
background-color
:
#E6E2DF
;
color
:
#B2AAA4
;
float
:
left
;
height
:
130px
;
width
:
262px
;
margin
:
0 10px 10px 0
;
padding
:
15px
;
}
.hover-panel h3
{
font-family
:
tandelle-1, tandelle-2, Impact, Sans-serif, sans
;
font-size
:
38px
;
line-height
:
1
;
margin
:
0 0 10px
;
text-transform
:
uppercase
;
}
.hover-panel p
{
font-size
:
12px
;
width
:
65%
;
}
Now let's add a static hover effect to change some of the colors and add a drop shadow:
.hover-panel:hover
{
background-color
:
#237ABE
;
}
.hover-panel:hover h3
{
color
:
#FFF
;
text-shadow
:
rgba(0, 0, 0, 0.398438) 0px 0px 4px
;
}