استایل زیبا با scss برای هاور - Stuing Hover Effects (نمونه 2) : border گوشه ای

@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.p10 {

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

}

section.p10 a {

width: 353px;

height: 94px;

line-height: 94px;

position: absolute;

top: 50%;

left: 50%;

margin-left: -176.5px;

margin-top: -47px;

}

section.p10 a:before, section.p10 a:after {

content: '';

position: absolute;

width: 40px;

height: 40px;

border-color: #FF0000;

border-style: solid;

border-width: 0;

-webkit-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);

-moz-transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);

transition: all 0.5s cubic-bezier(1, 0.2, 0.26, 0.7);

-webkit-transform: translate(0px, 0px) scale(0.8);

-moz-transform: translate(0px, 0px) scale(0.8);

-ms-transform: translate(0px, 0px) scale(0.8);

-o-transform: translate(0px, 0px) scale(0.8);

transform: translate(0px, 0px) scale(0.8);

opacity: 0;

}

section.p10 a:before {

left: 0;

bottom: 0;

border-bottom-width: 1px;

border-left-width: 1px;

}

section.p10 a:after {

top: 0;

right: 0;

border-top-width: 1px;

border-right-width: 1px;

}

section.p10 a:hover:before, section.p10 a:hover:after {

-webkit-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);

-moz-transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);

transition: all 2s cubic-bezier(0.14, 1.13, 0, 0.91);

opacity: 1;

}

section.p10 a:hover:before {

-webkit-transform: translate(-30px, 20px) scale(1);

-moz-transform: translate(-30px, 20px) scale(1);

-ms-transform: translate(-30px, 20px) scale(1);

-o-transform: translate(-30px, 20px) scale(1);

transform: translate(-30px, 20px) scale(1);

border-bottom-width: 12px;

border-left-width: 12px;

}

section.p10 a:hover:after {

-webkit-transform: translate(30px, -20px) scale(1);

-moz-transform: translate(30px, -20px) scale(1);

-ms-transform: translate(30px, -20px) scale(1);

-o-transform: translate(30px, -20px) scale(1);

transform: translate(30px, -20px) scale(1);

border-top-width: 12px;

border-right-width: 12px;

}