Nice hover

Hovers using an inset box-shadow, a border and transitions.

by Peter A

HTML

<div id="background">
    <div class="box">home</div>
    <div class="box">about</div>
    <div class="box">contact</div>
</div>

CSS

body {
    background: #ccc;
}

.box {
    float: left;
    cursor: pointer;
    text-align: center;
    padding: 8px 0px 10px;
    color: #fff;
    font-size: 15px;
    margin: 10px;
    width: 80px;
    height: 15px;
    text-shadow: 0 1px 0 rgba(0,0,0,0.5);
    box-shadow: 0px 0px 0px #000;
    border: 2px solid #222;
    border-radius: 10px;
    -webkit-transition: all 0.2s ease;
}

.box:hover, .box:focus {
    color: #aaa;
    background: white
    ;
    border: 2px solid lightgray;
    box-shadow: 0px 0px 25px rgba(225,30,50,0.7);   
}

.box:active {
    color: lightgray;
    border: 2px solid lightgray;
    box-shadow: inset 0px 0px 25px #000;   
}