html鼠标悬停显示箭头,CSS 悬停时出现箭头的按钮

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;

}