.link-btn {
text-decoration: none!important;
color: #fff!important;
font-weight: bold;
display: inline-block;
padding: 10px 15px;
border-radius: 60px;
box-shadow: 0px 8px 10px -6px rgba(0,0,0,.3);
transition: .2s;
}
.link-btn:hover {
box-shadow: none;
transform: translateY(2px);
opacity: .8;
}
/***ボタン中央寄せ用***/
.center {
text-align: center;
margin: 1.5em 0;
}
/***ボタン背景色***/
.ao {
background: #6b6be2;
}
.midori {
background: #6be292;
}
.pink {
background: pink;
}
.kuro {
background: #3c3c3c;
}
.g-ao {
background: linear-gradient(45deg, #007adf, #00ecbc);
}
.g-midori {
background: linear-gradient(45deg, #9ae25b, #00c1e3);
}
.g-pink {
background-image: linear-gradient(45deg, #ff6e87, #fcc951);
}
.g-kuro {
background: linear-gradient(0deg,#000, #b1b1b1);
}
Button Link Sample
サンプル
