拐道交叉的css3动画,3个CSS3按钮悬停交叉环绕边线动画

CSS

语言：

CSSSCSS

确定

@import url("https://fonts.googleapis.com/css?family=Raleway");

* {

box-sizing: border-box;

}

body {

margin: 0;

padding: 0;

width: 100%;

height: 100vh;

display: flex;

justify-content: center;

align-items: center;

flex-direction: column;

font-family: Raleway;

background-color: #ecf0f1;

}

.copyright {

position: absolute;

bottom: 0;

}

.copyright a {

text-decoration: none;

color: #16a085;

}

.copyright a:hover {

text-decoration: underline;

}

.button {

position: relative;

padding: 1em 1.5em;

border: none;

background-color: transparent;

cursor: pointer;

outline: none;

font-size: 18px;

margin: 1em 0.8em;

}

.button.type1 {

color: #566473;

}

.button.type1.type1::after,

.button.type1.type1::before {

content: "";

display: block;

position: absolute;

width: 20%;

height: 20%;

border: 2px solid;

transition: all 0.6s ease;

border-radius: 2px;

}

.button.type1.type1::after {

bottom: 0;

right: 0;

border-top-color: transparent;

border-left-color: transparent;

border-bottom-color: #566473;

border-right-color: #566473;

}

.button.type1.type1::before {

top: 0;

left: 0;

border-bottom-color: transparent;

border-right-color: transparent;

border-top-color: #566473;

border-left-color: #566473;

}

.button.type1.type1:hover:after,

.button.type1.type1:hover:before {

width: 100%;

height: 100%;

}

.button.type2 {

color: #16a085;

}

.button.type2.type2:after,

.button.type2.type2:before {

content: "";

display: block;

position: absolute;

top: 100%;

left: 0;

width: 100%;

height: 2px;

background-color: #16a085;

transition: all 0.3s ease;

transform: scale(0.85);

}

.button.type2.type2:hover:before {

top: 0;

transform: scale(1);

}

.button.type2.type2:hover:after {

transform: scale(1);

}

.button.type3 {

color: #435a6b;

}

.button.type3.type3::after,

.button.type3.type3::before {

content: "";

display: block;

position: absolute;

width: 20%;

height: 20%;

border: 2px solid;

transition: all 0.6s ease;

border-radius: 2px;

}

.button.type3.type3::after {

bottom: 0;

right: 0;

border-top-color: transparent;

border-left-color: transparent;

border-bottom-color: #435a6b;

border-right-color: #435a6b;

}

.button.type3.type3::before {

top: 0;

left: 0;

border-bottom-color: transparent;

border-right-color: transparent;

border-top-color: #435a6b;

border-left-color: #435a6b;

}

.button.type3.type3:hover:after,

.button.type3.type3:hover:before {

border-bottom-color: #435a6b;

border-right-color: #435a6b;

border-top-color: #435a6b;

border-left-color: #435a6b;

width: 100%;

height: 100%;

}