Material Design Menu

HTML

<ul class="mainMenu">
    <li class="circle"><a href="#">Menu 1</a></li>
    <li class="circle"><a href="#">Menu 2</a></li>
    <li class="circle"><a href="#">Menu 3</a></li>
    <li class="circle"><a href="#">Menu 4</a></li>
</ul>

CSS

html{background: #333}
a, a:hover{
    color: #393;
    text-decoration: none;
    font-weight: 700;
    transition: .2s ease-in;
}
a:hover{ color: #333333; transition: .2s ease-in; }
.mainMenu{
    list-style: none;
    text-align:center;
}
.mainMenu li{
    display: inline-block;
    padding: 10px;
    border: 2px solid #393;
    cursor: pointer;
}
.mainMenu li:hover a{ color: #333333; transition: .2s ease-in; }

.circle {
    background-image: url("http://upload.wikimedia.org/wikipedia/commons/0/0e/Ski_trail_rating_symbol-green_circle.svg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 0 0;
    transition: .3s ease-in;
}
.circle:hover{
    background-size: 200px 200px;
}