CSSだけで動きのあるボタンを作る。コピペだけで使えるサンプル集15選!

  • 2019年2月5日
  • 2023年7月4日
  • CSS
CSS CSSだけで動きのあるボタンを作る。コピペだけで使えるサンプル集15選!

 

 

マウスオーバーで変化するボタンを作るためには?

モバイルからのアクセスが増えてきたとしても、まだまだパソコンからのアクセスは十分あります。

そのパソコンからのアクセスで、クリック率を上げる為にボタンアクションがあるのとないのでは差が出てきます。

 

今回マウスオーバーした時に、ボタンのアクションが変化するCSSを解説していきます。

ボタンの変化はクリック率にも関係してきますので、対策できるのであればしっかり対策しましょう。

基本的にコピペするだけで大丈夫です。

以下のCSSが基本となります。

記述されているボタンのCSSとは別に必要なコードですので、それぞれのボタン別のCSSと一緒に必ず記載してください。

 

基本CSS
.btn {
display: inline-block;
padding: 0.5em 2em;
font-weight: bold;
text-decoration: none !important;
font-size: 20px;
text-align:center;
width:30%;
}

 

マウスを乗せると変化するボタン

 

色が半透明になる

html

<a href="" class="btn btn-a01">HOVER</a>
CSS

.btn-a01 {
background-color: #d10022;
border: 2px solid #d10022;
color: #fff !important;
}
.btn-a01:hover {
opacity: 0.5;
border: 2px solid #d10022 !important;
}

 

色が変化する

html

<a href="" class="btn btn-a02">HOVER</a>
CSS

.btn-a02 {
background-color: #d10022;
border: 2px solid #d10022;
color: #fff !important;
}
.btn-a02:hover {
background-color: #448ea3;
border: 2px solid #448ea3 !important;
}

 

枠とフォントの色がじわっと変化する

html

<a href="" class="btn btn-a03">HOVER</a>
CSS

.btn-a03 {
background-color: #d10022;
border: 2px solid #d10022;
color: #fff !important;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-a03:hover {
background-color: transparent;
border: 2px solid #d10022 !important;
color: #d10022 !important;
}

 

色がじわっと変化する

html

<a href="" class="btn btn-a04">HOVER</a>
CSS

.btn-a04 {
background-color: #d10022;
color: #fff !important;
box-sizing: border-box;
border: 2px solid #d10022 !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-a04:hover {
background-color: #fff67f;
border: 2px solid #fff67f !important;
}

 

色と形が変化する

html

<a href="" class="btn btn-a05">HOVER</a>
CSS

.btn-a05 {
background-color: #d10022;
border: 2px solid #d10022;
color: #fff !important;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all .3s;
transition: all .3s;
}
.btn-a05:hover {
background-color: transparent;
border: 2px solid #d10022 !important;
color: #d10022 !important;
border-radius: 10px;
}

 

立体のボタンがへこむ

html

<a href="" class="btn btn-a06">HOVER</a>
CSS

.btn-a06 {
background-color: #d10022;
border: 2px solid #d10022;
color: #fff !important;
margin: 0 0 10px 0;
box-shadow: 0 5px #8e0017;
}
.btn-a06:hover {
border: 2px solid #d10022 !important;
transform: translateY(5px) !important;
-ms-transform: translateY(5px);
-webkit-transform: translateY(5px);
border-bottom: none;
box-shadow: none;
}

左右のみのラインとボタンの色が変わる

html

<a href="" class="btn btn-a07">HOVER</a>
CSS

.btn-a07 {
position: relative;
display: inline-block;
color: #6d6d6d !important;
font-weight: bold;
padding: 0.8em 1em;
text-decoration: none;
border-top: 4px solid #ff0000;
border-bottom: 4px solid #ff0000;
background: #fff9fc;
transition: .6s;
}
.btn-a07:hover {
background: #ff0000;
border-top: 4px solid #ff0000 !important;
border-bottom: 4px solid #ff0000 !important;
color: #fff;
}

 

下だけが丸角で色が変わる

html

<a href="" class="btn btn-a08">HOVER</a>
CSS

.btn-a08 {
position: relative;
display: inline-block;
color: #fff !important;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
background: #0c0096;
border: 2px solid #0c0096;
border-radius: 0 0 15px 15px;
transition: .4s;
}
.btn-a08:hover {
background: #6bd7db;
border: 2px solid #6bd7db !important;
}

 

右だけが丸角で色が変わる

html

<a href="" class="btn btn-a09">HOVER</a>
CSS

.btn-a09 {
position: relative;
display: inline-block;
color: #fff !important;
font-weight: bold;
padding: 0.5em 1em;
text-decoration: none;
background: #f26800;
border: 2px solid #f26800;
border-radius: 0 15px 15px 0;
transition: .4s;
}
.btn-a09:hover {
background: #ffb5e3;
border: 2px solid #ffb5e3 !important;
}

 

ロールオーバーで下線から上線に移動する

html

<a href="" class="btn btn-a10">HOVER</a>
CSS

.btn-a10 {
position: relative;
display: inline-block;
color: #565656 !important;
font-weight: bold;
padding: 0.8em 1em;
text-decoration: none;
border-bottom: 8px solid #ff9900;
border-top: 8px solid #fff0ef;
background: #fff0ef;
transition: .3s;
}
.btn-a10:hover {
border-top: 8px solid #ff9900 !important;
border-bottom: 8px solid #fff0ef !important;
}

 

ロールオーバーで二重線から単線に変化

html

<a href="" class="btn btn-a11">HOVER</a>
CSS

.btn-a11 {
display: inline-block;
padding: 0.5em 1em;
color: #565656 !important;
text-decoration: none;
color: #67c5ff;
border: 5px double #003aa0;
border-radius: 3px;
transition: .6s;
}
.btn-a11:hover {
background: #fff;
border: 5px solid #003aa0 !important;
}

 

ロールオーバーで破線から単線に変化

html

<a href="" class="btn btn-a12">HOVER</a>
CSS

.btn-a12 {
display: inline-block;
padding: 0.5em 1em;
color: #565656 !important;
text-decoration: none;
color: #67c5ff;
border: 5px dashed #003aa0;
border-radius: 3px;
transition: .4s;
}
.btn-a12:hover {
background: #fff;
border: 5px solid #003aa0 !important;
}

 

クリックしたときにアクションするボタン。

立体的にボタンが動く

html

<a href="" class="btn btn-a13">HOVER</a>
CSS

.btn-a13 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
border-radius: 4px;
color: #ffffff;
background-image: -webkit-linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
background-image: linear-gradient(45deg, #FFC107 0%, #ff8b5f 100%);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: 3px solid #c58668;
}
.btn-a13:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: none !important;
}

 

クリックしたら色が変わる

html

<a href="" class="btn btn-a14">HOVER</a>
CSS

.btn-a14 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #0b72b7;
color: #0b72b7 !important;
text-shadow:1px 1px 1px rgba(255,255,255,1.2);
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-bottom: 3px solid #003d5b;
border-radius: 10px;
font-weight: bold;
}
.btn-a14:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
background: #d5e002;
color: #d5e002 !important;
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.2);
border-bottom: 1px solid #003d5b !important;
}

 

クリックしたら上下左右のラインが入れ替わる

html

<a href="" class="btn btn-a15">HOVER</a>
CSS

.btn-a15 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
background: #ffd1d1;
color: #fff !important;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.29);
border-right: 8px solid #fc5725;
border-left: 8px solid #fc5725;
font-weight: bold;
}
.btn-a15:active {
-ms-transform: translateY(4px);
-webkit-transform: translateY(4px);
transform: translateY(4px);
background: #f5ffbc;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.2);
border-right: 8px solid #ecff75 !important;
border-left: 8px solid #ecff75 !important;
}

まとめ

ロールオーバーのボタンはユーザーとしては、つい押してみたくなるような心理が働きます。

活用してクリックしてもらえるように利用してください。

 

https://eblogate.net/css-flame-sample”]