CSS
语言：
CSSSCSS
确定
* {
box-sizing: border box;
}
.center {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.btn,
button {
background: #1d1d1d;
border: none;
font-size: 10px;
font-size: 1rem;
background-color: #1d1d1d;
color: white;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 14px 21px;
padding: 1.4rem 2.1rem;
border: 2px solid #1d1d1d;
-webkit-transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
transition: color 0.1s cubic-bezier(0.16, 0.08, 0.355, 1), background 0.1s cubic-bezier(0.16, 0.08, 0.355, 1);
display: inline-block;
cursor: pointer;
width: 100%;
min-width: 200px;
min-width: 20rem;
outline: none;
vertical-align: middle;
text-align: center;
position: relative;
overflow: hidden;
}
@media (min-width: 400px) {
.btn,
button {
width: auto;
}
}
@media (min-width: 800px) {
.btn,
button {
font-size: 1.1rem;
padding: 1.6rem 2.8rem;
}
}
.btn:hover,
button:hover {
background: #2a2a2a;
border-color: #2a2a2a;
color: #fff;
}
.btn-border {
background-color: transparent;
color: #1d1d1d;
}
.btn-arrow {
position: relative;
-webkit-transition: background-color 300ms ease-out;
transition: background-color 300ms ease-out;
}
.btn-arrow span {
display: inline-block;
position: relative;
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
will-change: transform;
}
.btn-arrow:hover span {
-webkit-transform: translate3d(-1rem, 0, 0);
transform: translate3d(-1rem, 0, 0);
}
.btn-arrow svg {
position: absolute;
width: 1.1em;
right: 0px;
right: 0rem;
opacity: 0;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
-webkit-transition: all 300ms ease-out;
transition: all 300ms ease-out;
will-change: right, opacity;
}
.btn-arrow svg * {
stroke-width: 5;
stroke-color: transparent;
}
.btn-arrow:hover svg {
opacity: 1;
right: -2rem;
}
