【ボタン】cssで作るさまざまなボタンデザインを紹介

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;
}