【コピペOK】CSSで作る動きのあるボタンのサンプル集

CSSアニメーションを使ったボタンのアイデア＆サンプル集です。
コピペ後、配色をお好みの色に変更して、ご利用ください。

基本のCSS
１．ゆっくり色が変わるCSSボタン
２．オンマウスで枠線のみ表示されるボタン
３．オンマウスで沈むボタン
４．オンマウスで角丸からピン角になるボタン
５．光が走るボタン
６．オンマウスで下線が走るボタン
７．オンマウスでグラデーションが反転するボタン
７．オンマウスでグラデーションが反転するボタン

基本のCSS

まずは基本となるCSSになります。
全てのボタンで共通となりますので、まずはこちらをコピーしてください。

基本2については、枠がないタイプのボタンのみ（ボタンサンプル6）のみで使用します。

フォントサイズや色は、CSS環境、お好みや用途に合わせて調整してください。



/*基本*/
.btn_base{
	margin-bottom: 1em;
	text-align:center;
	}
.btn_base a{
	display:inline-block;
	width:auto;
	font-size: 18px;
	padding: 0.7em 2em;
	transition: 0.4s;
	font-weight: bold;
	text-decoration: none;
	border-radius: 5px;
	box-shadow: 0px 3px 10px rgba(0,0,0, 0.4);
}
.btn_base a:hover{}

/*基本2（テキストタイプのボタン）ボタンサンプル6以外は省略可*/
.btn_txt{
	margin-bottom: 1em;
	text-align:center;
	}
.btn_txt a{
	display:inline-block;
	width:auto;
	font-size: 18px;
	padding: 0.7em 2em;
	transition: 0.4s;
	font-weight: bold;
	text-decoration: none;
}
.btn_txt a:hover{}

/*基本*/

.btn_base{

margin-bottom: 1em;

text-align:center;

}

.btn_base a{

display:inline-block;

width:auto;

font-size: 18px;

padding: 0.7em 2em;

transition: 0.4s;

font-weight: bold;

text-decoration: none;

border-radius: 5px;

box-shadow: 0px 3px 10px rgba(0,0,0, 0.4);

}

.btn_base a:hover{}

/*基本2（テキストタイプのボタン）ボタンサンプル6以外は省略可*/

.btn_txt{

margin-bottom: 1em;

text-align:center;

}

.btn_txt a{

display:inline-block;

width:auto;

font-size: 18px;

padding: 0.7em 2em;

transition: 0.4s;

font-weight: bold;

text-decoration: none;

}

.btn_txt a:hover{}

１．ゆっくり色が変わるCSSボタン

サンプルボタン1

HTML

CSS



<p class="btn_base btn-sample-1">
   <a href="#">サンプルボタン1</a>
</p>

<a href="#">サンプルボタン1</a>

</p>



/* ボタンサンプル1 */
.btn-sample-1 a{
	background:#174AED;
	color: #FFF;
}
.btn-sample-1 a:hover{
	background: #EDBC11;
}

/* ボタンサンプル1 */

.btn-sample-1 a{

background:#174AED;

color: #FFF;

}

.btn-sample-1 a:hover{

background: #EDBC11;

}

２．オンマウスで枠線のみ表示されるボタン

サンプルボタン2

HTML

CSS



<p class="btn_base btn-sample-2">
   <a href="#">サンプルボタン2</a>
</p>

<a href="#">サンプルボタン2</a>

</p>



/* ボタンサンプル2 */
.btn-sample-2 a{
	background:#174AED;
	border:3px solid #174AED;
	color: #FFF;
}
.btn-sample-2 a:hover{
	background: #FFF;
	color: #174AED;
	
}

/* ボタンサンプル2 */

.btn-sample-2 a{

background:#174AED;

border:3px solid #174AED;

color: #FFF;

}

.btn-sample-2 a:hover{

background: #FFF;

color: #174AED;

}

３．オンマウスで沈むボタン

サンプルボタン3

HTML

CSS



<p class="btn_base btn-sample-3">
      <a href="#">サンプルボタン3</a>
</p>

<a href="#">サンプルボタン3</a>

</p>



/* ボタンサンプル3 */
.btn-sample-3 a{
	transition: 0.2s;
	background: #174AED;
	color: #FFF;
	box-shadow: 0px 3px 10px rgba(0,0,0, 0.4);
	margin-bottom: 4px;
}
.btn-sample-3 a:hover{
	margin-top: 4px;
	margin-bottom: 0px;
	box-shadow: 0px 1px 10px rgba(0,0,0, 0.4);
}

/* ボタンサンプル3 */

.btn-sample-3 a{

transition: 0.2s;

background: #174AED;

color: #FFF;

box-shadow: 0px 3px 10px rgba(0,0,0, 0.4);

margin-bottom: 4px;

}

.btn-sample-3 a:hover{

margin-top: 4px;

margin-bottom: 0px;

box-shadow: 0px 1px 10px rgba(0,0,0, 0.4);

}

４．オンマウスで角丸からピン角になるボタン

サンプルボタン4

HTML

CSS



<p class="btn_base btn-sample-4">
      <a href="#">サンプルボタン4</a>
</p>

<a href="#">サンプルボタン4</a>

</p>



/* ボタンサンプル4 */
.btn-sample-4 a{
	background: #174AED;
	color: #FFF;
  outline: none;
	border-radius: 25px;/* pxで調整してください。100vhにすると時間調整が難しいです*/
  transition:0.3s ease-out;
}
.btn-sample-4 a:hover{
	border-radius: 0;
}

/* ボタンサンプル4 */

.btn-sample-4 a{

background: #174AED;

color: #FFF;

outline: none;

border-radius: 25px;/* pxで調整してください。100vhにすると時間調整が難しいです*/

transition:0.3s ease-out;

}

.btn-sample-4 a:hover{

border-radius: 0;

}

５．光が走るボタン

サンプルボタン5

HTML

CSS



<p class="btn_base btn-sample-5">
      <a href="#">サンプルボタン5</a>
</p>

<a href="#">サンプルボタン5</a>

</p>



/* ボタンサンプル5（光が走るボタン）*/
.btn-sample-5 a{
  background: #174AED;
	color: #FFF;
  position: relative;
  overflow: hidden;
}
.btn-sample-5 a:hover{
  background:#131CD3;
}

.btn-sample-5 a:after{
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 10%;
  height: 100%;
  background: #fff;
  transform: rotate(45deg);
  animation: btn5_reflect 3s ease-in infinite;
}
@keyframes btn5_reflect{
  0%,70%{
    transform: rotate(45deg) scale(0);
    opacity: 0.5;
  }
  100%{
    transform: rotate(45deg) scale(100);
    opacity: 0;
  }
}

/* ボタンサンプル5（光が走るボタン）*/

.btn-sample-5 a{

background: #174AED;

color: #FFF;

position: relative;

overflow: hidden;

}

.btn-sample-5 a:hover{

background:#131CD3;

}

.btn-sample-5 a:after{

content: "";

position: absolute;

top: -50%;

left: -50%;

width: 10%;

height: 100%;

background: #fff;

transform: rotate(45deg);

animation: btn5_reflect 3s ease-in infinite;

}

@keyframes btn5_reflect{

0%,70%{

transform: rotate(45deg) scale(0);

opacity: 0.5;

}

100%{

transform: rotate(45deg) scale(100);

opacity: 0;

}

６．オンマウスで下線が走るボタン

サンプルボタン6

HTML

CSS



<p class="btn_txt btn-sample-6">
	<a href="#">サンプルボタン6</a>
</p>

<a href="#">サンプルボタン6</a>

</p>



/* ボタンサンプル6（下線が走るボタン）*/
.btn-sample-6 a{
  position:relative;
	color: #333;
}
.btn-sample-6 a:hover{}

.btn-sample-6 a::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: #333;
  transform: scale(0, 1);
  transform-origin: right center 0;
  transition: transform 0.3s ease-in-out;
}
.btn-sample-6 a:hover::before{
  transform: scale(1, 1);
  transform-origin: left center 0;
}

/* ボタンサンプル6（下線が走るボタン）*/

.btn-sample-6 a{

position:relative;

color: #333;

}

.btn-sample-6 a:hover{}

.btn-sample-6 a::before {

content: "";

position: absolute;

left: 0;

right: 0;

bottom: 0;

height: 2px;

background: #333;

transform: scale(0, 1);

transform-origin: right center 0;

transition: transform 0.3s ease-in-out;

}

.btn-sample-6 a:hover::before{

transform: scale(1, 1);

transform-origin: left center 0;

}

基本CSSは .btn_txt を使用してください。

７．オンマウスでグラデーションが反転するボタン

サンプルボタン7

HTML

CSS



<p class="btn_base btn-sample-7">
	<a href="#">サンプルボタン7</a>
</p>

<a href="#">サンプルボタン7</a>

</p>



/* ボタンサンプル7（グラデーションを反転）*/
.btn-sample-7 a{
  color: #FFF;
  position:relative;
}
.btn-sample-7 a:before,
.btn-sample-7 a:after{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top: 0;
  left:0;
    
  }
.btn-sample-7 a:before{
  z-index:-1;
  transition:0.7s;
  background:linear-gradient(#375de8,#0626d8);
}
.btn-sample-7 a:after{
  z-index:-2;
  left:0;
  background:linear-gradient(#0626d8,#375de8);
}
.btn-sample-7 a:hover:before{
  opacity:0;
}

/* ボタンサンプル7（グラデーションを反転）*/

.btn-sample-7 a{

color: #FFF;

position:relative;

}

.btn-sample-7 a:before,

.btn-sample-7 a:after{

content:"";

width:100%;

height:100%;

position:absolute;

top: 0;

left:0;

}

.btn-sample-7 a:before{

z-index:-1;

transition:0.7s;

background:linear-gradient(#375de8,#0626d8);

}

.btn-sample-7 a:after{

z-index:-2;

left:0;

background:linear-gradient(#0626d8,#375de8);

}

.btn-sample-7 a:hover:before{

opacity:0;

}

７．オンマウスでグラデーションが反転するボタン

サンプルボタン8

HTML

CSS



<p class="btn_base btn-sample-8">
	<a href="#">サンプルボタン8</a>
</p>

<a href="#">サンプルボタン8</a>

</p>



<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:heading -->
<h2>７．グラデーションが反転するボタン</h2>
<!-- /wp:heading -->

<!-- wp:html -->
<p class="btn_base btn-sample-1">
   <a href="#">サンプルボタン1</a>
</p>
<!-- /wp:html -->

<!-- wp:ub/tabbed-content-block {"blockID":"887cf2f0-8416-4ca5-bfba-e2f4de4eb498","activeControl":"tab-title-1","activeTab":1,"tabsTitle":["HTML","CSS"],"tabsTitleAlignment":["left","left"],"tabsAnchor":[]} -->
<!-- wp:ub/tab-block {"isActive":false,"parentID":"887cf2f0-8416-4ca5-bfba-e2f4de4eb498"} -->
<!-- wp:paragraph {"placeholder":" "} -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:urvanov-syntax-highlighter/code-block -->
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="lang:default decode:true " >&lt;p class="btn_base btn-sample-1"&gt;
   &lt;a href="#"&gt;サンプルボタン1&lt;/a&gt;
&lt;/p&gt;</pre></div>
<!-- /wp:urvanov-syntax-highlighter/code-block -->
<!-- /wp:ub/tab-block -->

<!-- wp:ub/tab-block {"index":1,"parentID":"887cf2f0-8416-4ca5-bfba-e2f4de4eb498"} -->
<!-- wp:paragraph {"placeholder":" "} -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:urvanov-syntax-highlighter/code-block -->
<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="lang:default decode:true " >/* ボタンサンプル7（グラデーションを反転）*/
.btn-sample-7 a{
  color: #FFF;
  position:relative;
}
.btn-sample-7 a:before,
.btn-sample-7 a:after{
  content:"";
  width:100%;
  height:100%;
  position:absolute;
  top: 0;
  left:0;
    
  }
.btn-sample-7 a:before{
  z-index:-1;
  transition:0.7s;
  background:linear-gradient(#375de8,#0626d8);
}
.btn-sample-7 a:after{
  z-index:-2;
  left:0;
  background:linear-gradient(#0626d8,#375de8);
}
.btn-sample-7 a:hover:before{
  opacity:0;
}</pre></div>
<!-- /wp:urvanov-syntax-highlighter/code-block -->
<!-- /wp:ub/tab-block -->
<!-- /wp:ub/tabbed-content-block --></div>
<!-- /wp:group -->

<h2>７．グラデーションが反転するボタン</h2>

<a href="#">サンプルボタン1</a>

</p>

<p></p>

<a href="#">サンプルボタン1</a>

</p></pre></div>

<p></p>

<div class="wp-block-urvanov-syntax-highlighter-code-block"><pre class="lang:default decode:true " >/* ボタンサンプル7（グラデーションを反転）*/

.btn-sample-7 a{

color: #FFF;

position:relative;

}

.btn-sample-7 a:before,

.btn-sample-7 a:after{

content:"";

width:100%;

height:100%;

position:absolute;

top: 0;

left:0;

}

.btn-sample-7 a:before{

z-index:-1;

transition:0.7s;

background:linear-gradient(#375de8,#0626d8);

}

.btn-sample-7 a:after{

z-index:-2;

left:0;

background:linear-gradient(#0626d8,#375de8);

}

.btn-sample-7 a:hover:before{

opacity:0;

}</pre></div>

</div>