استایل زیبا با scss برای هاور - Stuing Hover Effects (نمونه 6)

@import url(http://fonts.googleapis.com/css?family=Martel+Sans:200,300,400,800,900);

*,

*:before,

*:after {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

body {

font-family: 'Martel Sans', sans-serif;

background-color: #000;

}

section {

height: 350px;

width: 94%;

box-shadow: 0px 0px 146px 21px rgba(0, 0, 0, 0.75);

background-color: #000;

background-repeat: no-repeat;

background-size: cover;

background-position: center center;

position: relative;

overflow: hidden;

width: 100%;

margin: 0 auto 0px;

}

section a {

text-transform: uppercase;

text-align: center;

text-decoration: none;

font-size: 4.875em;

font-weight: 900;

color: #fff;

}

section a:after, section a:before {

content: '';

}

section.p15 {

background-image: url("6.jpg");

}

section.p15 a {

width: 274px;

height: 58px;

line-height: 58px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -137px;

margin-top: -29px;

line-height: 1;

}

section.p15 a .in, section.p15 a .t1:before, section.p15 a .t1:after, section.p15 a .t2:before, section.p15 a .t2:after {

content: '';

width: 0px;

height: 19px;

background-color: #fff;

position: absolute;

-webkit-transition-property: all;

-moz-transition-property: all;

transition-property: all;

-webkit-transition-duration: 0.3s;

-moz-transition-duration: 0.3s;

transition-duration: 0.3s;

-webkit-transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);

-moz-transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);

transition-timing-function: cubic-bezier(0.17, 0.67, 0.46, 1.45);

}

section.p15 a .t1 {

height: 60px;

width: 48px;

top: 0%;

left: -48px;

position: absolute;

}

section.p15 a .t1 *, section.p15 a .t1:before, section.p15 a .t1:after {

-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);

clip-path: polygon(0 0, 100% 0, 100% 100%, 25% 100%);

}

section.p15 a .t1:before {

right: 0;

}

section.p15 a .t1 .in {

right: 0;

top: 22px;

}

section.p15 a .t1:after {

right: 0;

top: 45px;

}

section.p15 a .t2 {

height: 60px;

width: 48px;

top: 0%;

right: -48px;

position: absolute;

}

section.p15 a .t2 *, section.p15 a .t2:before, section.p15 a .t2:after {

-webkit-clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);

clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%);

}

section.p15 a .t2:before {

left: 0;

}

section.p15 a .t2 .in {

left: 0;

top: 22px;

}

section.p15 a .t2:after {

left: 0;

top: 45px;

}

section.p15 a .t1:before, section.p15 a .t2:before {

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

transition-delay: 0s;

}

section.p15 a .t1 .in, section.p15 a .t2 .in {

-webkit-transition-delay: 0.1s;

-moz-transition-delay: 0.1s;

transition-delay: 0.1s;

}

section.p15 a .t1:after, section.p15 a .t2:after {

-webkit-transition-delay: 0.2s;

-moz-transition-delay: 0.2s;

transition-delay: 0.2s;

}

section.p15 a:hover .in, section.p15 a:hover .t1:before, section.p15 a:hover .t1:after, section.p15 a:hover .t2:before, section.p15 a:hover .t2:after {

width: 48px;

}

section.p15 a:hover .t1:before, section.p15 a:hover .t2:before {

-webkit-transition-delay: 0.2s;

-moz-transition-delay: 0.2s;

transition-delay: 0.2s;

}

section.p15 a:hover .t1 .in, section.p15 a:hover .t2 .in {

-webkit-transition-delay: 0.1s;

-moz-transition-delay: 0.1s;

transition-delay: 0.1s;

}

section.p15 a:hover .t1:after, section.p15 a:hover .t2:after {

-webkit-transition-delay: 0s;

-moz-transition-delay: 0s;

transition-delay: 0s;

}