<a class="button">Button</a>

.button {
    display: inline-block;
    width: 200px;
    height: 54px;
    text-align: center;
    text-decoration: none;
    line-height: 54px;
    outline: none;
    border: 1px solid #15aeec;
    background-color: #49c0f0;
    background-image: -webkit-linear-gradient(top, #49c0f0, #2cafe3);
    background-image: linear-gradient(to bottom, #49c0f0, #2cafe3);
    border-radius: 4px;
    color: #fff;
    line-height: 50px;
    -webkit-transition: none;
    transition: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
}
.button::before,
.button::after {
    position: absolute;
    z-index: -1;
    display: block;
    content: '';
}
.button,
.button::before,
.button::after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all .3s;
    transition: all .3s;
}
.button:hover {
    border:1px solid #1090c3;
    background-color: #1ab0ec;
    background-image: -webkit-linear-gradient(top, #1ab0ec, #1a92c2);
    background-image: linear-gradient(to bottom, #1ab0ec, #1a92c2);
}
.button:active {
    background: #1a92c2;
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, .2);
    color: #1679a1;
    text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}