ボタンの枠となるdiv内にspanを定義、spanを文字部分として文字部分だけhoverすると上にずれる。
before, afterでスライドしてくる背景と文字を作っている。
.slideUpBtn {
padding: 12px 24px;
background-color: transparent;
border: 2px solid hsl(243, 80%, 62%);
border-radius: 6px;
position: relative;
overflow: hidden;
transition: all 0.5s cubic-bezier(1, .15, .34, .92)
}
.slideUpBtn span {
display: inline-block;
transition: inherit;
color: hsl(243, 80%, 62%);
}
.slideUpBtn:hover span {
opacity: 0;
transform: translateY(-100%)
}
.slideUpBtn::before {
content: "";
background-color: hsl(243, 80%, 62%);
;
height: 100%;
left: 0;
position: absolute;
top: 0;
transform: translateY(100%);
transition: inherit;
width: 100%;
transition: transform 0.5s cubic-bezier(1, .15, .34, .92)
}
.slideUpBtn::after {
content: 'Hover me';
align-items: center;
display: flex;
height: 100%;
justify-content: center;
left: 0;
position: absolute;
top: 0;
transition: inherit;
transform: translateY(100%);
width: 100%;
}
.slideUpBtn:hover::before {
transform: translateY(0) scale(3);
transition-delay: .025s;
}
.slideUpBtn:hover::after {
opacity: 1;
color: hsl(222, 100%, 95%);
transform: translateY(0);
}
- | Mac | Windows11 | SP | ||||||
---|---|---|---|---|---|---|---|---|---|
ブラウザ | Chrome | Firefox | Safari | Chrome | Firefox | Edge | IE | Safari on iOS | Chrome for Android |
対応 | ○ | ○ | ○ | ○ | ○ | ○ | ○ |
メッセージ
トレセン学園