2022年3月24日 / 最終更新日時 : 2022年3月24日 info@rishuntrading.co.jp

色々なクリックボタンをご紹介

毎回ボタンを作っては忘れてしまう事が多いので、今回は、過去に制作したボタンを少しばかり整理しました。なお、矢印のアイコンには、fontawesomeを使っております。fontawesomeについては、こちらを参照ください。掲載したクリックボタンは自由に使って構いませんが、自己責任でお願いいたします。

プッシュ型(box-shadow使用)
プッシュ型(border-bottom使用)
プッシュ型(背景にgradient使用)
hover時にopacityを使用
hover時にfilter:brightnessを使用
色が反転するボタン
左から右に流れるボタン
右から左に流れるボタン
矢印が動くボタン
外側の矢印が動くボタン1
外側の矢印が動くボタン2
グラデーションを使ったボタン

プッシュ型(box-shadow使用)

ボタンテスト

HTML文

<div class="push-btn">
  <a href="#">ボタンテスト</a>
</div>

<a href="#">ボタンテスト</a>

</div>

CSS文

.push-btn{
    width:100%;
    margin-bottom:20px;
}
.push-btn>a{
    width:250px;
    height:50px;
    background:#6495ED;
    color:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    box-shadow:3px 3px 3px #c0c7d9;
    transition:all 0.3s;
}
.push-btn>a:after{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
}
.push-btn>a:hover{
    transform: translate3d(3px,3px,3px);
    box-shadow: none;
}

.push-btn{

width:100%;

margin-bottom:20px;

}

.push-btn>a{

width:250px;

height:50px;

background:#6495ED;

color:#fff;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

box-shadow:3px 3px 3px #c0c7d9;

transition:all 0.3s;

}

.push-btn>a:after{

content: "\f138";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:5%;

top:50%;

transform:translateY(-50%);

}

.push-btn>a:hover{

transform: translate3d(3px,3px,3px);

box-shadow: none;

}

プッシュ型(border-bottom使用)

ボタンテスト

HTML文

<div class="push-btn2">
  <a href="#">ボタンテスト</a>
</div>

<a href="#">ボタンテスト</a>

</div>

CSS文

.push-btn2{
    width:100%;
    margin-bottom:20px;
}
.push-btn2>a{
    box-sizing: border-box;
    width:250px;
    height:50px;
    background:#6495ED;
    color:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    border-bottom:solid 5px #c0c7d9;
    transition:all 0.3s;
}
.push-btn2>a:after{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
}
.push-btn2>a:hover{
    transform: translate3d(0,3px,0);
    border:none;
    box-shadow: none;
}

.push-btn2{

width:100%;

margin-bottom:20px;

}

.push-btn2>a{

box-sizing: border-box;

width:250px;

height:50px;

background:#6495ED;

color:#fff;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

border-bottom:solid 5px #c0c7d9;

transition:all 0.3s;

}

.push-btn2>a:after{

content: "\f138";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:5%;

top:50%;

transform:translateY(-50%);

}

.push-btn2>a:hover{

transform: translate3d(0,3px,0);

border:none;

box-shadow: none;

}

プッシュ型(背景にgradient使用)

ボタンテスト

HTML文

<div class="gradient-btn">
  <a href="#">ボタンテスト</a>
</div>

<a href="#">ボタンテスト</a>

</div>

CSS文

.gradient-btn{
    width:100%;
    margin-bottom:20px;
}
.gradient-btn>a{
    width:250px;
    height:50px;
    background: linear-gradient(-225deg, #8fe0ff 20%, #d87093 90%);
    color:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    box-shadow:3px 3px 3px #c0c7d9;
    border-radius:50px;
}
.gradient-btn>a:after{
    content: "\f054";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
}
.gradient-btn>a:hover{
    transform: translate3d(3px,3px,3px);
    border:none;
    box-shadow: none;
}

.gradient-btn{

width:100%;

margin-bottom:20px;

}

.gradient-btn>a{

width:250px;

height:50px;

background: linear-gradient(-225deg, #8fe0ff 20%, #d87093 90%);

color:#fff;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

box-shadow:3px 3px 3px #c0c7d9;

border-radius:50px;

}

.gradient-btn>a:after{

content: "\f054";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:8%;

top:50%;

transform:translateY(-50%);

}

.gradient-btn>a:hover{

transform: translate3d(3px,3px,3px);

border:none;

box-shadow: none;

}

hover時にopacityを使用

ボタンテスト

HTML文

<div class="opacity-btn">
  <a href="#">ボタンテスト</a>
</div>

<a href="#">ボタンテスト</a>

</div>

CSS文

.opacity-btn{
    width:100%;
    margin-bottom:20px;
}
.opacity-btn>a{
    width:250px;
    height:50px;
    background:#6495ED;
    color:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
}
.opacity-btn>a:after{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
}
.opacity-btn>a:hover{
    opacity:0.6;
}

.opacity-btn{

width:100%;

margin-bottom:20px;

}

.opacity-btn>a{

width:250px;

height:50px;

background:#6495ED;

color:#fff;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

}

.opacity-btn>a:after{

content: "\f138";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:5%;

top:50%;

transform:translateY(-50%);

}

.opacity-btn>a:hover{

opacity:0.6;

}

hover時にfilter:brightnessを使用

ボタンテスト

HTML文

<div class="brightness-btn">
  <a href="#">ボタンテスト</a>
</div>

<a href="#">ボタンテスト</a>

</div>

CSS文

.brightness-btn{
    width:100%;
    margin-bottom:20px;
}
.brightness-btn>a{
    width:250px;
    height:50px;
    background:#6495ED;
    color:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
}
.brightness-btn>a:after{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
}
.brightness-btn>a:hover{
    filter:brightness(1.2);
}

.brightness-btn{

width:100%;

margin-bottom:20px;

}

.brightness-btn>a{

width:250px;

height:50px;

background:#6495ED;

color:#fff;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

}

.brightness-btn>a:after{

content: "\f138";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:5%;

top:50%;

transform:translateY(-50%);

}

.brightness-btn>a:hover{

filter:brightness(1.2);

}

色が反転するボタン

ボタンテスト

HTML文

<div class="invert-btn">
  <a href="#">ボタンテスト</a>
</div>

<a href="#">ボタンテスト</a>

</div>

CSS文

.invert-btn{
    width:100%;
    margin-bottom:20px;
}
.invert-btn>a{
    width:250px;
    height:50px;
    border: solid 3px #6495ED;
    color:#6495ED;
    background:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    overflow:hidden;
}
.invert-btn>a:after{
    content: "\f054";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:8%;
    top:50%;
    transform:translateY(-50%);
}
.invert-btn>a:hover{
    background:#6495ED;
    color:#fff;
}

.invert-btn{

width:100%;

margin-bottom:20px;

}

.invert-btn>a{

width:250px;

height:50px;

border: solid 3px #6495ED;

color:#6495ED;

background:#fff;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

overflow:hidden;

}

.invert-btn>a:after{

content: "\f054";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:8%;

top:50%;

transform:translateY(-50%);

}

.invert-btn>a:hover{

background:#6495ED;

color:#fff;

}

左から右に流れるボタン

ボタンテスト

HTML文

<div class="rightflow-btn">
  <a href="#"><span>ボタンテスト<span></a>
</div>

<a href="#"><span>ボタンテスト<span></a>

</div>

CSS文

.rightflow-btn{
    width:100%;
    margin-bottom:20px;
}
.rightflow-btn>a{
    width:250px;
    height:50px;
    border: solid 3px #6495ED;
    color:#6495ED;
    background:#fff;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    overflow:hidden;
}
.rightflow-btn>a>span{
    position:relative;
    z-index:1;
}
.rightflow-btn>a:before{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    bottom:0;
    width: 0;
    height:100%;
    transition: all 0.3s ease;
    background:#6495ED;
    color:#fff;
}
.rightflow-btn>a:after{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
    z-index:1;
}
.rightflow-btn>a:hover{
    color:#fff;
}
.rightflow-btn>a:hover::before{
    width:100%;
    opacity:1;
}

.rightflow-btn{

width:100%;

margin-bottom:20px;

}

.rightflow-btn>a{

width:250px;

height:50px;

border: solid 3px #6495ED;

color:#6495ED;

background:#fff;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

overflow:hidden;

}

.rightflow-btn>a>span{

position:relative;

z-index:1;

}

.rightflow-btn>a:before{

content: "";

position: absolute;

top: 0;

left: 0;

bottom:0;

width: 0;

height:100%;

transition: all 0.3s ease;

background:#6495ED;

color:#fff;

}

.rightflow-btn>a:after{

content: "\f138";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:5%;

top:50%;

transform:translateY(-50%);

z-index:1;

}

.rightflow-btn>a:hover{

color:#fff;

}

.rightflow-btn>a:hover::before{

width:100%;

opacity:1;

}

右から左に流れるボタン

ボタンテスト

HTML文

<div class="flowright-btn">
  <a href="#"><span>ボタンテスト<span></a>
</div>

<a href="#"><span>ボタンテスト<span></a>

</div>

CSS文

.flowright-btn{
    width:100%;
    margin-bottom:20px;
}
.flowright-btn>a{
    width:250px;
    height:50px;
    border: solid 3px #6495ED;
    color:#ffffff;
    background:#6495ED;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    overflow:hidden;
}
.flowright-btn>a>span{
    position:relative;
    z-index:1;
}
.flowright-btn>a:before{
    content: "";
    position: absolute;
    top: 0;
    left:0;
    width: 0;
    height: 100%;
    transition: all 0.3s ease;
    opacity:0;
    background:#fff;
    color:#6495ED;
}
.flowright-btn>a:after{
    content: "\f138";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:5%;
    top:50%;
    transform:translateY(-50%);
    z-index:1;
}
.flowright-btn>a:hover{
    color:#6495ED;
}
.flowright-btn>a:hover::before{
    width:100%;
    opacity:1;
}

.flowright-btn{

width:100%;

margin-bottom:20px;

}

.flowright-btn>a{

width:250px;

height:50px;

border: solid 3px #6495ED;

color:#ffffff;

background:#6495ED;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

overflow:hidden;

}

.flowright-btn>a>span{

position:relative;

z-index:1;

}

.flowright-btn>a:before{

content: "";

position: absolute;

top: 0;

left:0;

width: 0;

height: 100%;

transition: all 0.3s ease;

opacity:0;

background:#fff;

color:#6495ED;

}

.flowright-btn>a:after{

content: "\f138";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:5%;

top:50%;

transform:translateY(-50%);

z-index:1;

}

.flowright-btn>a:hover{

color:#6495ED;

}

.flowright-btn>a:hover::before{

width:100%;

opacity:1;

}

矢印が動くボタン

ボタンテスト

HTML文

<div class="arrowmove-btn1">
  <a href="#"><span>ボタンテスト<span></a>
</div>

<a href="#"><span>ボタンテスト<span></a>

</div>

CSS文

.arrowmove-btn1{
    width:100%;
    margin-bottom:20px;
}
.arrowmove-btn1>a{
    width:250px;
    height:50px;
    color:#fff;
    background:#6495ED;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    overflow:hidden;
    box-shadow:3px 3px 3px #c0c7d9;
}
.arrowmove-btn1>a:after{
    content: "\f054";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    line-height: 1;
    position:absolute;
    right:10%;
    top:50%;
    transform:translateY(-50%);
    transition:all 0.3s;
}
.arrowmove-btn1>a:hover::after{
    right:5%;
}

.arrowmove-btn1{

width:100%;

margin-bottom:20px;

}

.arrowmove-btn1>a{

width:250px;

height:50px;

color:#fff;

background:#6495ED;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

overflow:hidden;

box-shadow:3px 3px 3px #c0c7d9;

}

.arrowmove-btn1>a:after{

content: "\f054";

font-weight: 900;

font-family: "Font Awesome 5 Free";

-moz-osx-font-smoothing: grayscale;

-webkit-font-smoothing: antialiased;

display: inline-block;

font-style: normal;

font-variant: normal;

text-rendering: auto;

line-height: 1;

position:absolute;

right:10%;

top:50%;

transform:translateY(-50%);

transition:all 0.3s;

}

.arrowmove-btn1>a:hover::after{

right:5%;

}

外側の矢印が動くボタン1

ボタンテスト

HTML文

<div class="arrowmove-btn2">
  <a href="#"><span>ボタンテスト</span></a>
</div>

<a href="#"><span>ボタンテスト</span></a>

</div>

CSS文

.arrowmove-btn2{
    width:100%;
    margin-bottom:20px;
}
.arrowmove-btn2>a{
    width:250px;
    height:50px;
    color:#6495ED;
    background:#fff;
    border:solid 1px #6495ED;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    box-shadow:3px 3px 3px #c0c7d9;
}
.arrowmove-btn2>a:before{
    content: "";
    position: absolute;
    top: 50%;
    margin-top: 2px;
    left: -34px;
    width: 56px;
    border-top: 1px solid #6495ED;
    transition:all 0.3s;
}
.arrowmove-btn2>a:after{
    content: "";
    position: absolute;
    top: 50%;
    margin-top: 2px;
    left: 18px;
    height: 9px;
    margin-top: -5px;
    border-right: 1px solid #6495ED;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    transition:all 0.3s;
}
.arrowmove-btn2>a:hover::before{
    transform: translateX(10px);
}
.arrowmove-btn2>a:hover::after{
    transform: translateX(10px) rotate(-45deg);
}

.arrowmove-btn2{

width:100%;

margin-bottom:20px;

}

.arrowmove-btn2>a{

width:250px;

height:50px;

color:#6495ED;

background:#fff;

border:solid 1px #6495ED;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

box-shadow:3px 3px 3px #c0c7d9;

}

.arrowmove-btn2>a:before{

content: "";

position: absolute;

top: 50%;

margin-top: 2px;

left: -34px;

width: 56px;

border-top: 1px solid #6495ED;

transition:all 0.3s;

}

.arrowmove-btn2>a:after{

content: "";

position: absolute;

top: 50%;

margin-top: 2px;

left: 18px;

height: 9px;

margin-top: -5px;

border-right: 1px solid #6495ED;

-webkit-transform: rotate(-45deg);

-ms-transform: rotate(-45deg);

transform: rotate(-45deg);

transition:all 0.3s;

}

.arrowmove-btn2>a:hover::before{

transform: translateX(10px);

}

.arrowmove-btn2>a:hover::after{

transform: translateX(10px) rotate(-45deg);

}

外側の矢印が動くボタン2

ボタンテスト

HTML文

<div class="arrowmove-btn3">
  <a href="#"><span>ボタンテスト</span></a>
</div>

<a href="#"><span>ボタンテスト</span></a>

</div>

CSS文

.arrowmove-btn3{
    width:100%;
    margin-bottom:20px;
}
.arrowmove-btn3>a{
    width:250px;
    height:50px;
    color:#333;
    background:#d1e0fc;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    box-shadow:3px 3px 3px #c0c7d9;
}
.arrowmove-btn3>a>span{
    padding-left:20px;
}
.arrowmove-btn3>a:before{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1px;
    margin: auto 0;
    background: #333;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    left: -30px;
    width: 60px;
}
.arrowmove-btn3>a:after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    height: 1px;
    margin: auto 0;
    background: #333;
    -webkit-transition: all .3s ease-out;
    transition: all .3s ease-out;
    left: 18px;
    width: 0;
    transform: rotate(-140deg) translateX(-1.8em) translateY(1.55em);
    transform-origin: left bottom;
}
.arrowmove-btn3>a:hover{
    transition: all ease .3s;
    filter: brightness(0.9);
}
.arrowmove-btn3>a:hover::before{
    width:85px;
}
.arrowmove-btn3>a:hover::after{
    width:10px;
}

.arrowmove-btn3{

width:100%;

margin-bottom:20px;

}

.arrowmove-btn3>a{

width:250px;

height:50px;

color:#333;

background:#d1e0fc;

text-decoration:none;

display:flex;

justify-content:center;

align-items:center;

position:relative;

transition:all 0.3s;

box-shadow:3px 3px 3px #c0c7d9;

}

.arrowmove-btn3>a>span{

padding-left:20px;

}

.arrowmove-btn3>a:before{

content: "";

position: absolute;

top: 0;

bottom: 0;

height: 1px;

margin: auto 0;

background: #333;

-webkit-transition: all .3s ease-out;

transition: all .3s ease-out;

left: -30px;

width: 60px;

}

.arrowmove-btn3>a:after{

content: "";

position: absolute;

top: 0;

bottom: 0;

height: 1px;

margin: auto 0;

background: #333;

-webkit-transition: all .3s ease-out;

transition: all .3s ease-out;

left: 18px;

width: 0;

transform: rotate(-140deg) translateX(-1.8em) translateY(1.55em);

transform-origin: left bottom;

}

.arrowmove-btn3>a:hover{

transition: all ease .3s;

filter: brightness(0.9);

}

.arrowmove-btn3>a:hover::before{

width:85px;

}

.arrowmove-btn3>a:hover::after{

width:10px;

}

グラデーションを使ったボタン

ボタンテスト

HTML文

<div class="gradient-btn2">
  <a href="#"><span>ボタンテスト</span></a>
</div>

<a href="#"><span>ボタンテスト</span></a>

</div>

CSS文

.gradient-btn2{
    width:100%;
    margin-bottom:20px;
}
.gradient-btn2>a{
    width:250px;
    height:50px;
    color:#fff;
    background:transparent;
    text-decoration:none;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    transition:all 0.3s;
    overflow:hidden;
    border-radius:50px;
    box-shadow:3px 3px 3px #c0c7d9;
}
.gradient-btn2>a:before{
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, #a8c4fa 20%, #6495ED 80%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: all 0.5s;
}
.gradient-btn2>a:after{
    content: '';
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #a8c4fa 40%, #6495ED 90%);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -2;
}
.gradient-btn2>a:hover::before{
    opacity:0;
}