現役エンジニア・デザイナーの備忘録ブログ

線がずれて重なっているしゃれたボタン

<a class="more_btn" href=""><span>MORE</span></a>
.more_btn {
position: relative;
height: 60px;
background: #000;
display: block;
margin: auto;
max-width: 300px;
width: 100%;
}
.more_btn span {
align-items: center;
display: inline-block;
justify-content: center;
color: #fff;
box-sizing: border-box;
position: absolute;
text-align: center;
font-size: 20px;
margin: 0;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
width: 100%;
}
.more_btn::after {
content: "";
border: solid 2px;
position: absolute;
height: 60px;
left: -7px;
top: -7px;
width: 100%;
}
a {
color: inherit;
text-decoration: none;
vertical-align: baseline;
}