<div class="container">
<a class="btn-loading" 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-loading {
display: inline-flex;
text-decoration: none;
font-weight: 700;
color: #111;
width: 100px;
height: 100px;
font-size: 14px;
position: relative;
opacity: 1 !important;
transition: all 0.3s;
background-color: #CCC;
border-radius: 100%;
transition: color 0.4s;
overflow: hidden;
}
.btn-loading:before,
.btn-loading:after {
content: "";
display: block;
position: absolute;
width: 50%;
height: 0;
background-color: #65A04D;
pointer-events: none;
}
.btn-loading:before {
bottom: 0;
left: 0;
}
.btn-loading:after {
top: 0;
right: 0;
}
.btn-loading:hover {
color: #65A04D;
}
.btn-loading:hover:before,
.btn-loading:hover:after {
height: 100%;
}
.btn-loading:hover:before {
transition: height 0.2s 0.2s linear;
}
.btn-loading:hover:after {
transition: height 0.2s linear;
}
.btn-loading span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 4px);
height: calc(100% - 4px);
background-color: #FFF;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
z-index: 99;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.