CSS
语言:
CSSSCSS
确定
body {
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, Arial, sans-serif;
font-weight: 300;
font-size: 112.5%;
line-height: 1.4;
background: url(http://cdn.backgroundhost.com/backgrounds/subtlepatterns/green_dust_scratch.png) #909ca2;
}
div {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn {
background: #113546;
color: #fff;
display: inline-block;
padding: 0.2rem 0.5rem;
margin: 0.5rem;
position: relative;
border-radius: 3px;
text-decoration: none;
cursor: pointer;
box-sizing: border-box;
-webkit-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.btn:hover {
background: #021f2c;
color: #fff;
}
.btn:hover:after {
border-color: #021f2c;
}
.btn:after {
content: '';
display: inline-block;
position: absolute;
left: -0.5rem;
top: -0.5rem;
width: calc(100% + (1rem));
height: calc(100% + (1rem));
z-index: -1;
border: 0.375rem solid #113546;
border-radius: 10px;
background: -webkit-linear-gradient(45deg, #ec5f67, #f99157, #fac863, #99c794, #5fb3b3, #6699cc, #c594c5);
background: linear-gradient(45deg, #ec5f67, #f99157, #fac863, #99c794, #5fb3b3, #6699cc, #c594c5);
box-sizing: inherit;
}
.btn:active:after {
box-shadow: inset 0 0 0.5rem #000;
}