CSSでできるボタンでマウスオーバーやクリックで動く!コピペだけでも利用可能なサンプル集15選!

CSS
交互に見ながら作業をするのは意外と面倒です。モバイルで見ながら、パソコンで操作できるようにこのページのQRコードを張っています。QRリーダーで読み込んで活用してください。モバイル用URL QRコード

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

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

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

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

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

今回aタグのテキストを利用しますので、基本的にコピペするだけで大丈夫です。

以下の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: solid 3px #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;
}

まとめ

暇がある時に追加していきますので、是非参考にしてください。

使い方が分からない方はコメント欄にてコメントください。

可能な範囲でお答えいたします。

最新情報をチェック‼