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 ;
}
Search WWH ::




Custom Search