CSS button slide

Subject:

<html>

<style type="text/css">        .button_sliding_bg_3{    color: #FFF;    background: #EF672F;    padding: 15px 20px;    margin: 25px;    font-family: 'OpenSansBold', sans-serif;    font-size: 14px;    font-weight: bold;    letter-spacing: 1px;    text-transform: uppercase;    border-radius: 2px;    display: inline-block;    text-align: center;    cursor: pointer;    box-shadow: inset 0 0 0 0 #C14800;    -webkit-transition: all ease 0.8s;    -moz-transition: all ease 0.8s;    transition: all ease 0.8s;}.button_sliding_bg:hover {    box-shadow: inset 0 100px 0 0 #C14800;}

 

/*.button_sliding_bg_2, .button_sliding_bg_3, .button_sliding_bg_4, .button_sliding_bg_5, .button_sliding_bg_6 {    color: #31302B;    background: #FFF;    padding: 12px 17px;    margin: 25px;    font-family: 'OpenSansBold', sans-serif;    border: 3px solid #31302B;    font-size: 14px;    font-weight: bold;    letter-spacing: 1px;    text-transform: uppercase;    border-radius: 2px;    display: inline-block;    text-align: center;    cursor: pointer;    box-shadow: inset 0 0 0 0 #31302B;    -webkit-transition: all ease 0.8s;    -moz-transition: all ease 0.8s;    transition: all ease 0.8s;}*/.button_sliding_bg_3:hover {    box-shadow: inset 0 -100px 0 0 #31302B;}

 

 

</style>

<button class="button_sliding_bg_3">button</button>

</html>

2015-10-07 16:30:52gstlouis