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

丸の中に線の矢印がついたボタン

<a href="">ENTRY</a>
a{
background: #000;
color: #fff;
font-size: 20px;
display: block;
padding: 30px;
position: relative;
margin: auto;
max-width: 240px;
width: 100%;
text-align: center;
text-decoration: none;
}
a::before, a::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 40px;
margin: auto;
vertical-align: middle;
}
a::before {
width: 32px;
height: 32px;
-webkit-border-radius: 50%;
border-radius: 50%;
background: #fff;
}
a::after {
right: 51px;
width: 14px;
height: 14px;
border-top: 2px solid #000;
border-right: 2px solid #000;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}