CSS
语言：
CSSSCSS
确定
@import url('https://fonts.googleapis.com/css?family=Amatic+SC');
body {
margin: 0;
height: 100%;
background-image: linear-gradient(to top, #d9afd9 0%, #97d9e1 100%);
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
}
.button_container {
position: absolute;
left: 0;
right: 0;
top: 30%;
}
.button_container p {
font-family: 'Amatic SC', cursive;
text-align: center;
font-size: 35px;
}
.btn {
border: none;
display: block;
text-align: center;
cursor: pointer;
text-transform: uppercase;
outline: none;
overflow: hidden;
position: relative;
color: #fff;
font-weight: 700;
font-size: 15px;
background-color: #222;
padding: 17px 60px;
margin: 0 auto;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.20);
}
.btn span {
position: relative;
z-index: 1;
}
.btn:after {
content: "";
position: absolute;
left: 0;
top: 0;
height: 490%;
width: 140%;
background: #78c7d2;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
-webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg);
transform: translateX(-98%) translateY(-25%) rotate(45deg);
}
.btn:hover:after {
-webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg);
transform: translateX(-9%) translateY(-25%) rotate(45deg);
}