استایل زیبا برای هاور دکمه - Button Hover Effect (نمونه 2) : باز شدن border از وسط

@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,900);

* {

box-sizing: inherit;

-webkit-transition-property: all;

transition-property: all;

-webkit-transition-duration: .6s;

transition-duration: .6s;

-webkit-transition-timing-function: ease;

transition-timing-function: ease;

margin: 0;

padding: 0;

}

html,

body {

box-sizing: border-box;

height: 100%;

width: 100%;

}

body {

background: #E1332D;

font-family: 'Roboto', sans-serif;

font-weight: 400;

}

#container {

width: 500px;

margin: 50px auto 0;

text-align: center;

}

.btn {

color: #fff;

cursor: pointer;

display: block;

font-size: 16px;

font-weight: 400;

line-height: 45px;

margin: 0 auto 2em;

max-width: 160px;

position: relative;

text-decoration: none;

text-transform: uppercase;

vertical-align: middle;

width: 100%;

text-align: center;

}

.btn:hover {

text-decoration: none;

}

.btn-2 {

letter-spacing: 0;

}

.btn-2:hover,

.btn-2:active {

letter-spacing: 5px;

}

.btn-2:after,

.btn-2:before {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

border: 1px solid rgba(255, 255, 255, 0);

bottom: 0px;

content: " ";

display: block;

margin: 0 auto;

position: relative;

-webkit-transition: all 280ms ease-in-out;

transition: all 280ms ease-in-out;

width: 0;

}

.btn-2:hover:after,

.btn-2:hover:before {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;

border-color: #fff;

-webkit-transition: width 350ms ease-in-out;

transition: width 350ms ease-in-out;

width: 70%;

}

.btn-2:hover:before {

bottom: auto;

top: 0;

width: 70%;

}