【CSS】シンプルなリンクボタン【コピペでOK】
WEB制作時に使える簡単なリンクボタンを掲載します。
CSSで大きさや背景色、角丸などの設定を自由に変えることでサイトにあったデザインに変更することが出来ます。
リンクボタン（サンプル）
HTML
<div class=”btncontainer”><a class=”btn-icon” href=”#”>リンクボタン</a></div>
CSS
.btncontainer {
margin: 40px auto;
text-align: center;
}
.btn-icon {
display: inline-block;
max-width: 360px;
text-align: left;
background-color: #e05381;
font-size: 16px;
color: #FFF;
text-decoration: none;
font-weight: bold;
padding: 12px 24px 12px 44px;
border-radius: 4px;
position: relative;
}
.btn-icon:before {
font-family: “Font Awesome 5 Free”;
content: “\f105”;
position: absolute;
left: 16px;
top: 50%;
margin-top: -11px;
font-weight: 900;
}
.btn-icon:hover {
opacity: 0.8;
}
.btncontainer a:hover {
color: #ffe8e8;
text-decoration: none;
}
