استایل زیبا برای هاور دکمه - Button Hover Effect (نمونه 5) : افکت پخش موج

@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-5 {

border: 0 solid;

box-shadow: inset 0 0 20px rgba(255, 255, 255, 0);

outline: 1px solid;

outline-color: rgba(255, 255, 255, 0.5);

outline-offset: 0px;

text-shadow: none;

-webkit-transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);

transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1);

}

.btn-5:hover {

border: 1px solid;

box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 0 20px rgba(255, 255, 255, 0.2);

outline-color: rgba(255, 255, 255, 0);

outline-offset: 15px;

text-shadow: 1px 1px 2px #427388;

}

سون لرن • آموزش...