Button Gradient

<div class="center">

<a class="btn gradient" href="#">Download</a>

</div>

a.btn.gradient{

    transition: all 500ms ease-in-out;

    position: relative;

    display: inline-block;

    vertical-align: middle;

    touch-action: manipulation;

    user-select: none;

    cursor: pointer;

    white-space: nowrap;

    text-decoration: none;

    text-align: center;

    text-transform: uppercase;

    letter-spacing: 5px;

    height: 60px;

    line-height: 60px;

    padding: 0 24px;

    margin: 15px;

    color: #ffffff;

    box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

    background: linear-gradient(54.7deg, #960ead 12%,#0ad8c7 100%);

}

a.btn.gradient:hover {

    background: linear-gradient(54.7deg, #0ad8c7 12%,#960ead 100%);

    transition: all 500ms ease-in-out;

}