SHIROI PONZU

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

HTML

<a href="">ENTRY</a>

CSS

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); }