<div class="container">
<a class="btn-handwriting" href="#">PUSH ME</a>
</div>
/* ここはコピーしなくてOK */
.container {
text-align: center;
padding-top: 40px;
@import url('https://fonts.googleapis.com/css2?family=Itim&display=swap');
font-family: 'Itim', cursive;
}
/* ここから下がボタンのCSS */
.btn-handwriting {
display: inline-block;
text-decoration: none;
color: #726B62;
font-weight: 700;
letter-spacing: 2px;
width: 220px;
text-align: center;
padding: 14px 16px;
position: relative;
opacity: 1 !important;
transition: all 0.2s;
border: 1px solid #726B62;
}
.btn-handwriting:hover {
border-left: none;
border-right: none;
letter-spacing: 5px;
}
.btn-handwriting:hover:before, .btn-handwriting:hover:after {
width: 100%;
height: 1px;
left: 0;
top: 2px;
transition: width 0.4s;
}
.btn-handwriting:hover:after {
left: auto;
right: 0;
top: auto;
bottom: 2px;
}
.btn-handwriting:before, .btn-handwriting:after {
content: "";
display: block;
width: 1px;
height: 100%;
background-color: #726B62;
position: absolute;
top: 0;
}
.btn-handwriting:before {
right: 3px;
}
.btn-handwriting:after {
left: 3px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.