BLOG
HTMLとCSSのみで簡単に作れる比較的シンプルな見出しボタンデザインをご紹介いたします。
コピペで使用する場合は必要に応じてCSSを調整してください。
ボタンデザインとCSSソースコード
じわっと背景色が変わる
- SAMPLE
- Button
<a href="#" class="btn01">Button</a>
.btn01 {
display:block;
max-width: 180px;
border: 2px solid #333;
font-size: 16px;
color: #333;
font-weight: bold;
padding:16px;
text-align: center;
border-radius: 4px;
transition: .4s;
}
.btn01:hover {
background-color: #333;
border-color: #333;
color: #FFF;
}
背景色を変更する
- SAMPLE
- Button
<a href="#" class="btn02">Button</a>
.btn02 {
display:block;
max-width: 180px;
background-color: #333;
font-size: 16px;
color: #FFF;
font-weight: bold;
padding:16px;
text-align: center;
border-radius: 4px;
transition: .4s;
}
.btn02:hover {
background-color: #D3BA2B;
}
ボーダースタイルを変更する
- SAMPLE
- Button
<a href="#" class="btn03">Button</a>
.btn03{
display:block;
text-align: center;
max-width: 180px;
border: 2px solid #333;
font-size: 16px;
color: #333;
font-weight: bold;
padding:16px;
border-radius: 4px;
}
.btn03:hover {
border-style: dashed;
}
動くグラデーションボタン
- SAMPLE
- Button
<a href="#" class="btn04">Button</a>
.btn04{
display: inline-block;
width: 180px;
text-align: center;
background: linear-gradient(90deg, rgb(22, 135, 237), rgb(153, 202, 250));
background-size: 200%;
color: #FFF;
font-size: 16px;
text-decoration: none;
font-weight: bold;
padding: 16px;
border-radius: 4px;
transition: .4s;
}
.btn04:hover {
background-position: right center;
}
▼グラデーション css ジェネレーター▼
矢印ボタン hover
- SAMPLE
- Button
<a href="#" class="btn05">Button</a>
.btn05{
width: 230px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
background: #333;
border: 2px solid #333;
position: relative;
padding: 0 0 0 10px;
}
.btn05:before {
content: "";
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 10px;
border-color: transparent transparent transparent #fff;
position: absolute;
top: 40%;
left: 0;
right: 90px;
margin: auto;
}
.btn05:hover{
color: #333;
background: #fff;
}
.btn05:hover:before{
border-color: transparent transparent transparent #333;
}
