HTML/CSS

【css】コピペでできる！かっこいいボタンデザイン10選！！

今回は、かっこいいデザインのボタンを10種類ほど解説していきたいと思います。

基本的にコピペで載せられるようにしてありますので、あなたのページで簡単に反映できます！

cssで作成していくので解像度が荒いなどという心配はありません。画像で作成するバナーほどはいらないけど、なにか押せるかっこいいボタンがほしい・・・。そんなときにご活用ください！

解説の前に

今回は以下のCSSを先に記述しておいてください。

全てのボタンに流用いたします。

.btn{
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  font-size: 200%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

 

 

ちょっとしたアニメーションがあるシンプルなボタン

立体的なボタンに押してくださいと言わんばかりのアニメーションを追加したデザインになります！

BUTTON

 

<a href="" class="btn btn-animation">BUTTON</a>
a.btn-animation{
  color: #fff;
  background-color: #ff9d4d;
  border-bottom: 8px solid #ad662b;
  padding: 10px 8px 10px 8px;
}
a.btn-animation:hover{
  color: #fff;
  border-bottom: 4px solid #ad662b;
  margin-top:4px;
}

 

グラデーションを利用したボタン

グラデーションを利用したボタンです。一時期グラデーションはあまりWebでは見かけられませんでしたが、近年増加傾向にあるデザインの一つになります。

BUTTON

 

<a href="" class="btn btn-gradient">BUTTON</a>
a.btn-gradient{
  position: relative;
  display:inline-block;
  color:#fff;
  background : linear-gradient(to right , #fb87ff , #fff987);
  padding: 10px 8px 10px 8px;
  z-index:1;
}
a.btn-gradient::before {
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width:100%; 
  height:100%;
  content:"";
  background : linear-gradient(to right , #fb87ff ,70%, #fff987);
  opacity:0;
  transition:opacity 0.2s;
}
a.btn-gradient:hover::before {
  opacity:1;
}
a.btn-gradient:hover{
  color:#fff;
}

 

線（ボーダー）のみのボタン

線のみで表現する手法です。背景が透過するため、様々なデザインに合わせやすいでしょう。

BUTTON

 

<a href="" class="btn btn-border">BUTTON</a>
a.btn-border{
  color:#555;
  padding: 10px 8px 10px 8px;
  border:2px solid #555;
}
a.btn-border:hover{
  color:#aaa;
  border-color:#aaa; 
}

 

アニメーションによってスムーズに背景が切り替わるボタン１

背景の色が左から右へとスムーズに遷移いたします。

BUTTON

 

<div class="parent"><a class="btn-animation02 btn">BUTTON</a></div>
a.btn-animation02{
  position: relative;
  overflow: hidden;
  color:#fff;
  background: #222;
  padding: 10px 8px 10px 8px;
  z-index:1;
}
a.btn-animation02::before {
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width: 150%;
  height: 500%;
  content:"";
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transform: translateX(-96%) ;
  transform: translateX(-96%);
  background-color: #ff9d4d;

}
a.btn-animation02:hover::before {
  -webkit-transform: translateX(0%) ;
  transform: translateX(0%) ;

}
a.btn-animation02:hover{
  color:#fff;
}

 

アニメーションによってスムーズに背景が切り替わるボタン２(１の応用)

１の応用です。応用といっても遷移する色を斜めにしただけになります。このように簡単に応用ができるのもcssでボタンを作る利点でしょう。

BUTTON

 

<div class="parent"><a class="btn-animation03 btn">BUTTON</a></div>
a.btn-animation03{
  position: relative;
  overflow: hidden;
  color:#fff;
  background: #222;
  padding: 10px 8px 10px 8px;
  z-index:1;
}
a.btn-animation03::before {
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width: 150%;
  height: 500%;
  content:"";
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transform: translateX(-98%) translateY(-55%) rotate(45deg);
  transform: translateX(-98%) translateY(-55%) rotate(45deg);
  background-color: #ff9d4d;

}
a.btn-animation03:hover::before {
  -webkit-transform: translateX(-10%) translateY(-55%) rotate(45deg);
  transform: translateX(-10%) translateY(-55%) rotate(45deg);

}
a.btn-animation03:hover{
  color:#fff;
}

 

文字が立体的に飛び出しているボタン

立体的な文字を押し込むイメージです。

BUTTON

 

<div class="parent"><a class="btn-3d btn">BUTTON</a></div>
a.btn-3d{
  color: #ff9d4d;
  text-shadow: 0px 4px 2px rgba(0, 0, 0, 0.32), 0px 1px 0px #6182ca, 0px 2px 0px #d68745, 0px 3px 0px #ad662b;
  font-weight: bold;
  padding: 10px 8px 10px 8px;
}
a.btn-3d:hover{
  color: ##ff9d4d !important;
  text-shadow:none;
  margin-top:6px;
  margin-bottom:-6px;
}

 

ボーダーのアニメーションを使ったボタン１

ボーダーを意識して作成したものになります。マウスオーバーでボーダーが出現します。

BUTTON

 

<div class="parent"><a class="btn-animation-border btn">BUTTON</a></div>
a.btn-animation-border{
  position: relative;
  color:#fff;
  background-color: #222;
  padding: 10px 8px 10px 8px;
}
a.btn-animation-border::before,
a.btn-animation-border::after {
  position:absolute;
  width: 0;
  height: 2.5px;
  content:"";
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  background-color: #222;
}
a.btn-animation-border::before {
  top:0;
  left:0;
}
a.btn-animation-border::after {
  right:0;
  bottom:0;
}
a.btn-animation-border:hover::before,
a.btn-animation-border:hover::after {
  width:100%;
}
a.btn-animation-border:hover{
  color:#000;
  background-color: #fff;
}

 

ボーダーアニメーションを使ったボタン２

１と同じでボーダーを意識して作成していますが、よりボーダーにフューチャーした形になります。

BUTTON

 

<div class="parent"><a class="btn-border-animation2 btn">BUTTON</a></div>
a.btn-border-animation2{
  position: relative;
  color:#ff9d4d;
  font-weight: bold;
  padding: 10px 8px 10px 8px;
  transition: .4s;
}
a.btn-border-animation2::before{
  content:"";
  position:absolute;
  width: 100%;
  height: 4px;
  top:100%;
  left:0;
  transition: .2s;
  background-color: #ff9d4d;
}
a.btn-border-animation2::after{
  content:"";
  position:absolute;
  width: 100%;
  height: 4px;
  top:0%;
  left:0;
  transition: .2s;
  background-color: #ff9d4d;
}
a.btn-border-animation2:hover::before {
  top: -webkit-calc(100% - 5px);
  top: calc(100% - 5px);
}
a.btn-border-animation2:hover::after {
  top: 5px;
}
a.btn-border-animation2:hover{
  color: #ff9d4d;
}

 

キラリと光る演出のあるボタン

キラッとワンポイントですが光るだけで何かいい感じに見えてしまうボタンです。

BUTTON

 

<div class="parent"><a class="btn-animation04 btn">BUTTON</a></div>
a.btn-animation04{
  position: relative;
  overflow: hidden;
  color:#fff;
  background: #ff9d4d;
  padding: 10px 8px 10px 8px;
  z-index:1;
}
a.btn-animation04::before {
  position:absolute;
  top:0;
  left:0;
  z-index:-1;
  width: 15%;
  height: 500%;
  content:"";
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
  -webkit-transform: translateX(-500%) translateY(-30%) rotate(45deg);
  transform: translateX(-500%) translateY(-30%) rotate(45deg);
  background-color: rgba(255,255,255,0.5);

}
a.btn-animation04:hover::before {
  -webkit-transform: translateX(1000%) translateY(-30%) rotate(45deg);
  transform: translateX(1000%) translateY(-30%)  rotate(45deg);
}
a.btn-animation04:hover{
  color:#fff !important;
}

 

画面に近づいているように影の演出を加えたボタン

まるで画面に近づいたような演出をシャドウによって表現します。

BUTTON

 

<div class="parent"><a class="btn-shadow btn">BUTTON</a></div>
a.btn-shadow{
  color: #fff;
  background-color:#ff9d4d;
  padding: 10px 8px 10px 8px;
  box-shadow: 20px 38px 34px -26px rgba(0,0,0,0.2);
}
a.btn-shadow:hover{
  color: #fff !important;
  box-shadow:2px 8px 4px -6px rgba(0,0,0,0.3);
}

 

まとめ

いかがでしたか？今回はHTMLとCSSを使用してなるべく簡単にできる方法をご紹介いたしました。CSSは複雑になるほど様々な動きを付けることができます。

参考になりましたら幸いです。ぜひご活用ください！

トップに戻る

-HTML/CSS