>> テーマ変更に伴い見づらい箇所や不具合があるかもしれません、ご迷惑をおかけします。→

PR

コピペで！色が変わる・キラっと光る：動きのあるボタンデザインCSS

CSS

2021.10.212024.01.25

この記事は約16分で読めます。

ボタンデザインのCSSサンプルです。CSSのみで装飾できるデザインをコピペでご利用頂けます。

目次

シンプルボタン
アニメーションボタン
色を変える

シンプルボタン

色の変更は以下をご参考に。

マカロンビビッドパステル和色セーフ色名赤桃青紫黄橙緑茶黒

背景色・文字色が変わる

HTML

<a href=”#” class=”btn_01″>ボタン</a>

CSSコードを表示

.btn_01 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
color: #78aad2;
font-size: 18px;
font-weight: 700;
border: solid 2px #28b9ff;
border-radius: 5px;
width: 300px;
transition: 0.5s;
}
.btn_01:hover {
color: white;
background: #28b9ff;
transition: 0.5s;
}

背景色・文字色が変わる（逆）

HTML

<a href=”#” class=”btn_02″>ボタン</a>

CSSコードを表示

.btn_02 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
background: #28b9ff;
color: #fff;
font-size: 18px;
font-weight: 700;
border: solid 2px #fff;
border-radius: 5px;
width: 300px;
transition: 0.5s;
}
.btn_02:hover {
color: #78aad2;
background: #fff;
border: solid 2px #28b9ff;
transition: 0.5s;
}

背景色・文字色が変わる（影付き）

HTML

<a href=”#” class=”btn_03″>ボタン</a>

CSSコードを表示

.btn_03 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
color: #78aad2;
font-size: 18px;
font-weight: 700;
border: solid 2px #28b9ff;
border-radius: 5px;
width: 300px;
transition: 0.5s;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.btn_03:hover {
background: #28b9ff;
color: white;
transition: 0.5s;
}

背景色・文字色が変わる（影付き・逆）

ボタン３デザインの色を逆にしたバージョン

HTML

<a href=”#” class=”btn_04″>ボタン</a>

CSSコードを表示

.btn_04 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
background: #28b9ff;
color: #fff;
font-size: 18px;
font-weight: 700;
border: solid 2px #fff;
border-radius: 5px;
width: 300px;
transition: 0.5s;
box-shadow: 0px 3px 3px rgba(0, 0, 0, 0.3);
}
.btn_04:hover {
background: #fff;
color: #78aad2;
border: solid 2px #28b9ff;
transition: 0.5s;
}

立体ボタンを押す感じ

HTML

<a href=”#” class=”btn_05″>ボタン</a>

コードを表示

.btn_05 {
display: inline-block;
padding: 0.5em 1em;
text-decoration: none;
text-align: center;
background: #fff;
color: #78aad2;
font-size: 18px;
font-weight: 700;
border: solid 3px #28b9ff;
border-radius: 5px;
box-shadow: 0 5px 0 #28b9ff;
width: 300px;
transition: 0.5s;
}
.btn_05:hover {
transform: translateY(5px);
box-shadow: 0 0 0 #28b9ff;
transition: 0.5s;
}

アニメーションボタン

周りから背景色が変わる

HTML

<div class=”wrap1″><a class=”btn_a01″ href=”#”>ボタン</a></div>

CSSコードを表示

.wrap1 {
display: inline-block;
padding: 0.5em 1em;
text-align: center;
}
.wrap1 a {
-webkit-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
-moz-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
-ms-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
-o-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
display: block;
margin: 20px auto;
max-width: 180px;
text-decoration: none;
border-radius: 4px;
padding: 20px 30px;
}
a.btn_a01 {
color:#78aad2;
box-shadow: rgba(40, 185, 255, 0.4) 0 0px 0px 2px inset;
}
a.btn_a01:hover {
color: white;
box-shadow: #28b9ff 0 0px 0px 40px inset;
}

上から背景色が変わる

HTML

<div class=”wrap1″><a class=”btn_a02″ href=”#”>ボタン</a></div>

CSSコードを表示

.wrap1 {
display: inline-block;
padding: 0.5em 1em;
text-align: center;
}
.wrap1 a {
-webkit-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
-moz-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
-ms-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
-o-transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
transition: all .5s cubic-bezier(0.390, 0.500, 0.150, 1.360);
display: block;
margin: 20px auto;
max-width: 180px;
text-decoration: none;
border-radius: 4px;
padding: 20px 30px;
}
a.btn_a02 {
color: #28b9ff;
box-shadow: rgba(120,170,210, 0.4) 0 0px 0px 2px inset;
}
a.btn_a02:hover {
color: white;
box-shadow: #28b9ff 0 80px 0px 2px inset;
}

上下にボーダーライン出現

HTML

<a href=”#” class=”btn_a03″>ボタン</a>

CSSコードを表示

.btn_a03{
background:#28b9ff;
color:#fff;
border:none;
position:relative;
height:100px;
text-align: center;
margin: 1px 0 1px 0x;
width: 250px;
font-size: 18px;
font-weight: 700;
text-decoration: none;
padding:0.5em 2em;
cursor:pointer;
transition:800ms ease all;
outline:none;
}
.btn_a03:hover{
background:#fff;
color:#28b9ff;
}
.btn_a03:before,.btn_a03:after{
content:'';
position:absolute;
top:0;
right:0;
height:2px;
width:0;
background: #28b9ff;
transition:400ms ease all;
}
.btn_a03:after{
right:inherit;
top:inherit;
left:0;
bottom:0;
}
.btn_a03:hover:before,.btn_a03:hover:after{
width:100%;
transition:800ms ease all;
}

枠の変化・背景色の変化

<a href=”#” class=”btn_a04″>ボタン</a>

HTML

<div class=”blue”><a href=”#” class=”btn_a04″>ボタン</a></div>

CSSコードを表示

.btn_a04{
color:#000;
background:transparent;
border-width:2px;
border-style: solid;
border-color: #000;
position:relative;
margin:1em;
display:inline-block;
padding:0.5em 1em;
transition:all 0.3s ease-in-out;
text-align:center;
font-family:comfortaa;
font-weight:bold;
text-decoration: none;
}
.btn_a04:before, .btn_a04:after {
content:'';
display:block;
position:absolute;
border-color:#000;
box-sizing:border-box;
border-style:solid;
width:1em;
height:1em;
transition:all 0.3s ease-in-out
}
.btn_a04:before {
top:-6px;
left:-6px;
border-width:2px 0 0 2px;
z-index:5;
}
.btn_a04:after {
bottom:-6px;
right:-6px;
border-width:0 2px 2px 0;
}
.btn_a04:hover:before, .btn_a04:hover:after {
width:calc(100% + 12px);
height:calc(100% + 12px);border-color:#fff
}
.btn_a04:hover {
color:#000;
background-color:#fff;
border-color:rgba(0, 0, 0, 0.3);
}
/*ブルーバージョン*/
.blue .btn_a04 {color:#28b9ff;border-color:#78aad2}
.blue .btn_a04:before, .blue .btn_a04:after {border-color:#28b9ff}
.blue .btn_a04:hover:before, .blue .btn_a04:hover:after {border-color:#28b9ff;}
.blue .btn_a04:hover {color:#fff;background-color:#28b9ff;border-color:#28b9ff;}

キラッと光る１

キラッとボタン

HTML

<a href=”#” class=”btn_a05″>ボタン</a>

コードを表示

.btn_a05 {
display: block;
position: relative;
width: 300px;
padding: 10px 0;
background-color: #28b9ff;
box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.3);
border-radius: 5px;
font-weight: bold;
font-size: 18px;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
}
.btn_a05:hover {
background: rgba(40, 185, 255,0.8);
color: #fff;
}
.btn_a05::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: btn_a05 3s ease-in-out infinite;
}
@-webkit-keyframes btn_a05 {
0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

キラッと光る２

キラッとボタン２

HTML

<a href=”#” class=”btn_a06″>ボタン</a>

コードを表示

.btn_a06 {
display: block;
position: relative;
width: 300px;
padding: 10px 0;
background-color: #28b9ff;
box-shadow: 0 3px 0 0 rgba(0, 0, 0, 0.3);
border-radius: 5px;
font-weight: bold;
font-size: 18px;
color: #fff;
text-align: center;
text-decoration: none;
overflow: hidden;
}
.btn_a06:hover {
background: rgba(40, 185, 255,0.8);
color: #fff;
}
.btn_a06::before {
position: absolute;
content: '';
display: inline-block;
top: -180px;
left: 0;
width: 30px;
height: 100%;
background-color: #fff;
animation: btn_a06 3s ease-in-out infinite;
}
@-webkit-keyframes btn_a06 {
0% {transform: scale(0) rotate(25deg);opacity: 0;}
50% {transform: scale(1) rotate(25deg);opacity: 1;}
100% {transform: scale(50) rotate(25deg);opacity: 0;}
}

オンマウスでキラッと光る３

キラッとボタン３

HTML

<a href=”#” class=”btn_a07″>ボタン</a>

コードを表示

.btn_a07{
position: relative;
display:inline-block;
background: #28b9ff;
color: #fff;
font-weight: bold;
font-size: 18px;
padding: 10px 20px;
text-decoration: none;
outline: none;
overflow: hidden;
text-decoration: none;
}
.btn_a07::before {
content: '';
position: absolute;
top: 0;
left: -75%;
width: 70%;
height: 100%;
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
transform: skewX(-35deg);
}
.btn_a07:hover{
color: #fff;
}
.btn_a07:hover::before {
animation: shine 0.7s;
}
@keyframes shine {100% {left: 125%;}}

色を変える

色の変更は以下をご参考に。

マカロンビビッドパステル和色セーフ色名赤桃青紫黄橙緑茶黒

コメント

タイトルとURLをコピーしました