css button background

by sthag

HTML

<div class="skillsDouble">
    <ul>
        <li><a href="#">Automation</a>
        </li>
        <li><a href="#">TDD</a>
        </li>
    </ul>
</div>
<!--End skills double-->

CSS

ul {
    list-style-type:none;
}
ul li a {
    text-decoration:none;
}
.skillsDouble {
    float: left;
    margin-right: 1px;
}
.skillsDouble li {
    width:100px;
    padding: 11px 16px;
    text-align:center;
    float:left;
    background: #ff3232;
    /* Old browsers */
    background: linear-gradient(to right, red 50%, blue 50%);
    background-size: 200% 100%;
    background-position:left bottom;
    margin-left:10px;
    transition:all 2s ease;
}
.skillsDouble li:hover {
    background-position:right bottom;
}
.skillsDouble li a {
    color:white;
}