animation
duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name
background-image
url("imageLocation")
box-shadow
inset (opt.) | offset-x | offset-y | blur-radius | spread-radius | color
text-shadow
h-shadow | v-shadow | blur | color
Mini Examples
Make a Link Fill Container
.link-container {
width: 100px;
height: 50px;
border-color: #333;
overflow: hidden;
}
.link-container a {
display: block;
width: 100%;
height: 100%;
line-height: 50px;
color: #FFF;
background-color: #59B9FF;
}
.link-container a:hover {
background-color: #7FC9FF;
}
# Width and height can be whatever you want. Adjust line-height for vertical spacing.
Button Press
.button {
display: inline-block;
margin-top: 5px;
height: 50px;
width: 100px;
color: #FFF;
background-color: #59B9FF;
border-radius: 5px;
border-bottom: 5px #0082E0 solid;
}
.button:active {
margin-top: 8px;
2px border-bottom: #0082E0 solid;
}
# Makes a cool little button that gets pressed down on click.