<div class="container">
<a class="btn-rotation" href="#">
<span>PUSH ME</span>
<span>PLEASE!!!</span>
</a>
</div>
/* ここはコピーしなくてOK */
.container {
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&display=swap');
font-family: 'Noto Sans JP', sans-serif;
text-align: center;
padding-top: 40px;
}
/* ここから下がボタンのCSS */
.btn-rotation {
display: inline-block;
text-decoration: none;
color: #FFF;
font-weight: 700;
background-color: #65A04D;
width: 200px;
text-align: center;
padding: 16px;
position: relative;
opacity: 1 !important;
transition: all 0.4s;
line-height: 1.2;
border-radius: 4px;
border: 2px solid #65A04D;
}
.btn-rotation:hover {
transform: rotateX(180deg);
background-color: #FFF;
color: #65A04D;
}
.btn-rotation:hover span {
transform: rotateX(180deg);
}
.btn-rotation:hover span:nth-child(1) {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
}
.btn-rotation:hover span:nth-child(2) {
visibility: visible;
width: 100%;
height: inherit;
opacity: 1;
}
.btn-rotation span {
display: block;
transition: opacity 0.3s 0.2s;
width: 100%;
height: inherit;
}
.btn-rotation span:nth-child(2) {
visibility: hidden;
height: 0;
width: 0;
opacity: 0;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.