#0202004
タップでプレビュー
<button class="c-linkSlot-2"><span>No hover</span></button>
.c-linkSlot-2 {
display: block;
padding: 4px 8px;
overflow: hidden;
border: #fff 1px solid;
}
.c-linkSlot-2 span {
display: block;
position: relative;
color: #fff;
text-align: center;
transition: 0.3s;
text-shadow: rgba(255, 255, 255, 0) 0px 30px 0px;
}
.c-linkSlot-2:hover span {
color: transparent;
transform: translateY(-30px);
text-shadow: white 0px 30px 0px;
}
.c {
&-linkSlot-2 {
display: block;
padding: 4px 8px;
overflow: hidden;
border: #fff 1px solid;
span {
display: block;
position: relative;
color: #000;
text-align: center;
transition: 0.3s;
text-shadow: rgba($color: #fff, $alpha: 0) 0px 30px 0px;
}
&:hover {
span {
color: transparent;
transform: translateY(-30px);
text-shadow: rgba($color: #fff, $alpha: 1) 0px 30px 0px;
}
}
}
}