左から入ってくる青い背景は疑似要素before
文字部分はspanで囲う
どちらもhover時にtransform: translateXをアニメーションさせているが、spanについてはタイミングを背景と合わせるためkeyframeで細かい設定をしている。
firefoxだと文字が少しちらつく。
safariだと青い背景がスライドしてくる瞬間は角丸が解除されてしまう。
.snapLeftBtn {
text-align: center;
padding: 12px 24px;
background-color: hsl(222, 100%, 95%);
position: relative;
border-radius: 6px;
color: hsl(243, 80%, 62%);
overflow: hidden;
}
.snapLeftBtn::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
border-radius: 6px;
transform: translateX(-101%);
background: hsl(243, 80%, 62%);
transition: transform .25s ease-in;
}
.snapLeftBtn:hover::before {
transform: translateX(0);
}
.snapLeftBtn span {
position: relative;
z-index: 1;
display: block;
transition: color 0.1s .15s ease-in;
}
.snapLeftBtn:hover span {
color: hsl(222, 100%, 95%);
animation: animButtonSpan 0.4s;
}
@keyframes animButtonSpan {
0% {
transform: translateX(0);
opacity: 1;
}
35% {
transform: translateX(20px);
opacity: 0;
}
50.001% {
transform: translateX(-20px);
}
60% {
transform: translateX(0px);
}
}
- | Mac | Windows11 | SP | ||||||
---|---|---|---|---|---|---|---|---|---|
ブラウザ | Chrome | Firefox | Safari | Chrome | Firefox | Edge | IE | Safari on iOS | Chrome for Android |
対応 | ○ | △ | △ | ○ | ○ | ○ | ○ |
メッセージ
トレセン学園