動きのあるボタン

btn1　左から右に背景が流れる

背景が流れる（左→右）

HTML

<a href="#" class="btn1 bgleft"><span>背景が流れる（左→右）</span></a>

CSS

.btn1{
position: relative;
overflow: hidden;
text-decoration: none;
display: inline-block;
border: 1px solid #b22222;
padding: 10px 30px;
text-align: center;
outline: none;
transition: ease .2s;
border-radius: 5px;
}

.btn1 span {
position: relative;
z-index: 3;
color:#b22222;
}

.btn1:hover span{
color:#fff;
}

.bgleft:before {
content: '';
position: absolute;
top: 0;
left: 0;
z-index: 2;
background:#b22222;
width: 100%;
height: 100%;
transition: transform .6s cubic-bezier(0.8, 0, 0.2, 1) 0s;
transform: scale(0, 1);
transform-origin: right top;
}

.bgleft:hover:before{
transform-origin:left top;
transform:scale(1, 1);
}



btn2　手前に回転

Before rotationAfter rotation

HTML

<a href="#" class="btn2 rotatefront"><span>Before rotation</span><span>After rotation</span></a>

CSS

.btn2 {
position: relative;
display: inline-block;
width:100%;
max-width: 250px;
height: 50px;
line-height: 50px;
text-align: center;
outline: none;
}


.btn2 span {
display: block;
position: absolute;
width: 100%;
height: 100%;
border: 1px solid #b22222;
transform-style: preserve-3d;
transition: 0.5s;
}

.rotatefront span:nth-child(1) {
background: #fff;
color: #b22222;
transform: rotateX(0deg);
transform-origin: 0 50% -25px;
}

.rotatefront:hover span:nth-child(1) {
transform: rotateX(-90deg);
}

.rotatefront span:nth-child(2) {
background: #b22222;
color: #fff;
transform: rotateX(90deg);
transform-origin: 0 50% -25px;
}

.rotatefront:hover span:nth-child(2) {
transform: rotateX(0deg);
}



btn3　凹凸をつける

Button

HTML

<a href="" class="btn3">立体Button</a>

CSS

a.btn3 {
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
position: relative;
width: 120px;
margin: auto;　/*センターにする場合*/
padding: 5px 20px;
font-weight: bold;
border-radius: 10px;
color: #b22222;
border: 3px solid #b22222;
box-shadow: 5px 5px #b22222;
transition: 0.3s ease-in-out;
}
a.btn3:hover {
box-shadow: none;
transform: translate(5px, 5px);
color: #b22222;
}



btn4　グラデーション変化

Gradation change

HTML

<a href="#" class="btn4">Gradation change</a>

CSS

.btn4{
display: inline-block;
color:#fff;
padding: 10px 30px;

border-radius:10px;
text-decoration: none;
outline: none;
background: linear-gradient(270deg, #3bade3 0%, #576fe6 25%, #9844b7 51%, #ff357f 100%);
background-position: 1% 50%;
background-size: 200% auto;
transition: all 0.3s ease-out;
}

.btn4:hover {
color: #fff;
background-position: 99% 50%;
}




btn5　矢印が動く

矢印が右に移動

HTML

<a href="#" class="btn5 btnarrow1">矢印が右に移動</a>

CSS

.btn5{
position: relative;
text-decoration: none;
display: inline-block;
background:#b22222;
color:#fff;
padding: 10px 40px 10px 30px;

border-radius:10px;
text-align: center;
outline: none;
transition: ease .2s;
}

.btn5:hover{
background:#800000;
}

/* btn5矢印が右に移動 */
.btnarrow1::after{
content: '';
position: absolute;
top:42%;
right: 13px;
width: 5px;
height: 5px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
transition: all .3s;
}

.btnarrow1:hover::after{
right: 11px;
}



btn6　上下に動くボタン

上下に動くボタン

HTML

<a href="#" class="btn6">上下に動くボタン</a>

CSS

a.btn6 {
display: block;
text-align: center;
vertical-align: middle;
text-decoration: none;
width: 180px;
padding: 5px 20px;
font-weight: bold;
border: 2px solid #b22222;
background: #b22222;
color: #fff;
border-radius: 5px;
transition: 0.5s;
animation: move_a 2s infinite;
}
@keyframes move_a {
0% {transform: translate(0px, 4px);}
5% {transform: translate(0px, -4px);}
10% {transform: translate(0px, 4px);}
15% {transform: translate(0px, -4px);}
20% {transform: translate(0px, 4px);}
25% {transform: translate(0px, -4px);}
30% {transform: translate(0px, 0px);}
}
a.btn6:hover {
color: #b22222;
background: #fff;
}