ボタン作成

参考：https://pulpxstyle.com/css-button/

デザイン①

HTML

<div class="button15">
<a href="https://www.togojinja.jp/kyushu-okinawa/">中国・四国地方
復縁神社TOP5</a>
</div>

CSS

.button15 a {
display: block;
position: relative;
margin: 0 auto;
padding: 1em 2em;
width: 300px;
color: #ffffff;
font-size: 18px;
font-weight: 700;
background-color: #F30100;
border-radius: 50vh;
transition: 0.3s;
}

.button15 a::before {
content: '';
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
width: 50px;
height: 50px;
background-color: #f2f2f2;
border-radius: 50vh;
}

.button15 a::after {
content: '';
position: absolute;
top: 50%;
right: 32px;
transform: translateY(-50%) rotate(45deg);
width: 5px;
height: 5px;
border-top: 3px solid #333333;
border-right: 3px solid #333333;
}

.button15 a:hover {
text-decoration: none;
background-color: #cccccc;
}