#0101001
タップでプレビュー
<button class="c-btnPush"><span>PUSH!!</span></button>
.c-btnPush {
display: block;
max-width: 160px;
width: 100%;
padding: 8px 16px;
background-color: #fff;
border-radius: 100px;
text-align: center;
box-shadow: #ccc 0px 4px 0px;
transition: 0.5s ease;
color: #000;
}
.c-btnPush:hover {
box-shadow: #ccc 0px 0px 0px;
transform: translateY(4px);
}
.c-btnPush span {
/* 文字を少し歪ませる */
transform: scaleY(0.95);
}
.c {
&-btnPush {
display: block;
max-width: 160px;
width: 100%;
padding: 8px 16px;
background-color: #fff;
border-radius: 100px;
text-align: center;
box-shadow: #ccc 0px 4px 0px;
transition: 0.5s ease;
color: #000;
&:hover {
box-shadow: #ccc 0px 0px 0px;
transform: translateY(4px);
}
span {
// 任意 文字を少し歪ませる
transform: scaleY(0.9);
}
}
}