webページにはサイトによってさまざまなボタンデザインがあると思います。
昨今、アニメーションを使ったこだわったボタンなど押したくなるようなボタンも多いです。
今回はwebページなどでよく使うボタンデザインを紹介していきたいと思います。
cssで作るさまざまなボタン
矢印ありのボタン
html
<div class="btn01">
<a href="">ボタン</a>
</div>
css
.btn01{width: 200px;}
.btn01 a{
padding: 10px;
text-decoration: none;
color: #222;
background: #ddd;
display: block;
text-align: center;
position: relative;
}
.btn01 a:after{
content: '';
width: 5px;
height: 5px;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: rotate(45deg);
position: absolute;
right: 20px;
top: 50%;
margin: -2.5px 0;
}
丸ボタン
html
<div class="btn02">
<a href="">ボタン</a>
</div>
css
.btn02{width: 200px;}
.btn02 a{
padding: 10px;
text-decoration: none;
color: #222;
background: #ddd;
display: block;
text-align: center;
position: relative;
transition: 0.3s;
border-radius: 30px;
}
.btn02 a:after{
content: '';
width: 5px;
height: 5px;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: rotate(45deg);
position: absolute;
right: 20px;
top: 50%;
margin: -2.5px 0;
}
.btn02 a:hover {
background: #aaa;
}
グラデーションボタン
html
<div class="btn03">
<a href="">ボタン</a>
</div>
css
.btn03{width: 200px;}
.btn03 a{
padding: 10px;
text-decoration: none;
color: #222;
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(153,153,230,1) 54%, rgba(0,212,255,1) 100%);
display: block;
text-align: center;
position: relative;
transition: 0.3s;
box-shadow: 0 5px 0 #aaa;
}
.btn03 a:after{
content: '';
width: 5px;
height: 5px;
border-top: 2px solid #333;
border-right: 2px solid #333;
transform: rotate(45deg);
position: absolute;
right: 20px;
top: 50%;
margin: -2.5px 0;
}
.btn03 a:hover {
transform: translateY(3px);
text-decoration: none;
box-shadow: 0 2px 0 #aaa;
}
コメント