<div class="container">
<a class="btn-sizechange" href="#">
<span>PUSH ME</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-sizechange {
display: inline-block;
text-decoration: none;
font-weight: 700;
color: #65A04D;
text-align: center;
width: inherit;
min-width: 188px;
border: 2px solid #65A04D;
padding: 12px 16px;
position: relative;
opacity: 1 !important;
transition: all 0.3s;
}
.btn-sizechange:after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
opacity: 0;
background-color: #65A04D;
transition: all 0.3s;
pointer-events: none;
}
.btn-sizechange span {
position: relative;
z-index: 99;
}
.btn-sizechange:hover {
color: #FFF;
transform: scale(0.9);
}
.btn-sizechange:hover:after {
width: 100%;
height: 100%;
opacity: 1;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.