ホバーエフェクト一覧
CSSはスタイルシート・responsive.cssの一番下にコピペ。
zoomボタン
矢印の位置の調整が必要な場合あり
HTML
<div class="design_btn1"><a href="" class="learn_more"><span class="circle"><span class="icon arrow"></span></span><span class="button_text">詳しく見る</span></a></div>
ボタンの幅は下記を変更
.design_btn1 a {
width: 225px;
}
ボタンの高さは下記を変更
.design_btn1 a .circle {
width: 50px;
height: 50px;
}
.design_btn1 .button_text {
padding: 13px 0;
}
最終的な矢印の左右の位置の調整・矢印の横線の長さ
.design_btn1 .circle .icon.arrow {
left: 11px;
width: 18px;
}
矢印の位置・大きさ・太さの調整
.design_btn1 .circle .icon.arrow::before {
top: -4.7px;
right: 1px;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
}
スタイルシート (style.css)
.design_btn1 {
text-align: center;
}
.design_btn1 a {
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: 0;
vertical-align: middle;
text-decoration: none;
background: transparent;
padding: 0;
font-size: 16px;
width: 225px;
height: auto;
}
.design_btn1 a .circle {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: relative;
display: block;
margin: 0;
width: 50px;
height: 50px;
background: #282936;
border-radius: 50%;
}
.design_btn1 a:hover .circle {
width: 100%;
}
.design_btn1 .circle .icon {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
bottom: 0;
margin: auto;
background: #fff;
}
.design_btn1 .circle .icon.arrow {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
left: 11px;
width: 18px;
height: 2px;
background: none;
}
.design_btn1 .circle .icon.arrow::before {
position: absolute;
content: "";
top: -4.6px;
right: 1px;
width: 8px;
height: 8px;
border-top: 2px solid #fff;
border-right: 2px solid #fff;
transform: rotate(45deg);
}
.design_btn1 .button_text {
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 13px 0;
margin: 0 0 0 30px;
color: #282936;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
}
.design_btn1 a:hover .circle .icon.arrow {
background: #fff;
transform: translate(1rem, 0);
}
.design_btn1 a:hover .button_text {
color: #fff;
}
横にスワイプ
HTML
<div class="design_btn2"><a href="#">詳しく見る</a></div>
ボタンの幅・高さは下記を変更
.design_btn2 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
スタイルシート (style.css)
.design_btn2 {
text-align: center;
}
.design_btn2 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #1e73be !important;
border: 1px solid #1e73be;
}
.design_btn2 a:before {
content: '';
display: block;
width: 100%;
height: calc(100% + 2px);
position: absolute;
top: -1px;
left: -100%;
z-index: -1;
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
background: #00466d;
}
.design_btn2 a:hover {
color: #ffffff !important;
text-decoration: none;
}
.design_btn2 a:hover:before {
left: 0;
}
斜めにスワイプ
HTML
<div class="design_btn3"><a href="#">詳しく見る</a></div>
ボタンの幅・高さは下記を変更
.design_btn3 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
/* 70pxのところを上で設定した高さに変更 */
.design_btn3 a:before {
width: calc(100% + 70px);
left: calc(-100% – 70px);
}
スタイルシート (style.css)
.design_btn3 {
text-align: center;
}
.design_btn3 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #1e73be !important;
border: 1px solid #1e73be;
}
.design_btn3 a:before {
content: '';
display: block;
height: calc(100% + 2px);
position: absolute;
top: -1px;
z-index: -1;
transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0s;
transform: skewX(45deg);
width: calc(100% + 70px);
left: calc(-100% - 70px);
transform-origin: bottom left;
background: #00466d;
}
.design_btn3 a:hover {
color: #ffffff !important;
text-decoration: none;
}
.design_btn3 a:hover:before {
left: 0;
}
サークルが広がる
HTML
<div class="design_btn4"><a href="#">詳しく見る</a></div>
ボタンの幅・高さは下記を変更
.design_btn4 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
スタイルシート (style.css)
.design_btn4 {
text-align: center;
}
.design_btn4 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #1e73be !important;
border: 1px solid #1e73be;
transition: 0s ease-in-out;
}
.design_btn4 a:before, .design_btn4 a:after {
position: absolute;
top: 50%;
content: "";
width: 20px;
height: 20px;
background-color: #00466d;
border-radius: 50%;
z-index: -1;
}
.design_btn4 a:before {
left: -20px;
transform: translate(-50%, -50%);
}
.design_btn4 a:hover:before {
-webkit-animation: criss-cross-left 0.8s both;
animation: criss-cross-left 0.8s both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.design_btn4 a:after {
right: -20px;
transform: translate(50%, -50%);
}
.design_btn4 a:hover:after {
-webkit-animation: criss-cross-right 0.8s both;
animation: criss-cross-right 0.8s both;
-webkit-animation-direction: alternate;
animation-direction: alternate;
}
.design_btn4 a:hover {
color: #ffffff !important;
transition: 0.5s;
transition-delay: 0.4s;
text-decoration: none;
}
@keyframes criss-cross-left {
0% {
left: -20px;
}
50% {
left: 50%;
width: 20px;
height: 20px;
}
100% {
left: 50%;
width: 150%;
height: 150%;
}
}
@keyframes criss-cross-right {
0% {
right: -20px;
}
50% {
right: 50%;
width: 20px;
height: 20px;
}
100% {
right: 50%;
width: 150%;
height: 150%;
}
}
上下2方向から斜めにスワイプ
HTML
<div class="design_btn5"><a href="#">詳しく見る</a></div>
ボタンの幅・高さは下記を変更
.design_btn5 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
/* ボタンの幅・高さ変更による変更
高さは上で設定したもの、幅は上の設定よりも少し長くする（直角三角形の斜辺の長さ） */
.design_btn5 a:hover:before, .design_btn5 a:hover:after {
border-width: 70px 268px;
}
スタイルシート (style.css)
.design_btn5 {
text-align: center;
}
.design_btn5 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #1e73be !important;
border: 1px solid #1e73be;
transition: 0.5s ease-in-out;
}
.design_btn5 a:before, .design_btn5 a:after {
content: "";
position: absolute;
width: 0;
height: 0;
border: 0 solid;
transform: rotate(360deg);
transition: 0.5s ease-in-out;
z-index: -1;
}
.design_btn5 a:before {
bottom: 0;
left: 0;
border-color: transparent transparent transparent #00466d;
}
.design_btn5 a:after {
top: 0;
right: 0;
border-color: transparent #00466d transparent transparent;
}
.design_btn5 a:hover {
color: #ffffff !important;
text-decoration: none;
}
.design_btn5 a:hover:before, .design_btn5 a:hover:after {
border-width: 70px 268px;
}
上下2方向からスワイプ
HTML
<div class="design_btn6"><a href="#"><span>詳しく見る</span></a></div>
ボタンの幅・高さは下記を変更
.design_btn6 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
スタイルシート (style.css)
.design_btn6 {
text-align: center;
}
.design_btn6 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #1e73be !important;
border: 1px solid #1e73be;
transition: 0.5s ease-in-out;
transition-delay: 0.4s;
}
.design_btn6 a:before, .design_btn6 a:after, .design_btn6 a span:before, .design_btn6 a span:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;
background-color: rgba(0, 70, 109, 0.66);
transition: 0.4s ease-in-out;
z-index: -1;
}
.design_btn6 a:after, .design_btn6 a span:before {
top: auto;
bottom: 0;
}
.design_btn6 a span:before, .design_btn6 a span:after {
transition-delay: 0.4s;
}
.design_btn6 a:hover:before, .design_btn6 a:hover:after, .design_btn6 a:hover span:before, .design_btn6 a:hover span:after {
height: 70px;
}
.design_btn6 a:hover {
color: #ffffff !important;
transition: 0.5s ease-in-out;
text-decoration: none;
}
左右2方向からスワイプ
HTML
<div class="design_btn7"><a href="#"><span>詳しく見る</span></a></div>
ボタンの幅・高さは下記を変更
.design_btn7 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
.design_btn7 a:hover:before, .design_btn7 a:hover:after, .design_btn7 a:hover span:before, .design_btn7 a:hover span:after {
width: 260px;
}
スタイルシート (style.css)
.design_btn7 {
text-align: center;
}
.design_btn7 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #1e73be !important;
border: 1px solid #1e73be;
transition: 0.5s ease-in-out;
transition-delay: 0.4s;
}
.design_btn7 a:before, .design_btn7 a:after, .design_btn7 a span:before, .design_btn7 a span:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 70px;
background-color: rgba(0, 70, 109, 0.55);
transition: 0.4s;
z-index: -1;
}
.design_btn7 a:after, .design_btn7 a span:before {
left: auto;
right: 0;
}
.design_btn7 a span:before, .design_btn7 a span:after {
transition-delay: 0.4s;
}
.design_btn7 a:hover:before, .design_btn7 a:hover:after, .design_btn7 a:hover span:before, .design_btn7 a:hover span:after {
width: 260px;
}
.design_btn7 a:hover {
color: #ffffff !important;
transition: 0.5s ease-in-out;
text-decoration: none;
}
上下4箇所からスワイプ
HTML
<div class="design_btn8"><a href="#"><span>詳しく見る</span></a></div>
ボタンの幅・高さは下記を変更
.design_btn8 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
スタイルシート (style.css)
.design_btn8 {
text-align: center;
}
.design_btn8 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #1e73be !important;
border: 1px solid #1e73be;
transition: 0.5s ease-in-out;
}
.design_btn8 a:before, .design_btn8 a:after, .design_btn8 a span:before, .design_btn8 a span:after {
content: "";
position: absolute;
top: 0;
width: 25.25%;
height: 0;
background-color: #00466d;
transition: 0.5s ease-in-out;
z-index: -1;
}
.design_btn8 a:before {
left: 0;
}
.design_btn8 a:after {
left: 50%;
}
.design_btn8 a span:before {
left: 25%;
}
.design_btn8 a span:after {
left: 75%;
}
.design_btn8 a span:before, .design_btn8 a span:after {
top: auto;
bottom: 0;
}
.design_btn8 a:hover:before, .design_btn8 a:hover:after, .design_btn8 a:hover span:before, .design_btn8 a:hover span:after {
height: 70px;
}
.design_btn8 a:hover {
color: #ffffff !important;
transition: 0.5s ease-in-out;
text-decoration: none;
}
中央からスワイプ
HTML
<div class="design_btn9"><a href="#"><span>詳しく見る</span></a></div>
ボタンの幅・高さは下記を変更
.design_btn9 a {
min-width: 260px;
height: 70px;
line-height: 70px;
}
スタイルシート (style.css)
.design_btn9 {
text-align: center;
}
.design_btn9 a {
display: inline-block;
min-width: 260px;
max-width: 100%;
height: 70px;
line-height: 70px;
font-size: 16px;
padding: 0 20px;
position: relative;
overflow: hidden;
z-index: 3;
box-sizing: border-box;
transition: all 0.35s ease;
color: #fff !important;
border: 1px solid #1e73be;
transition: 0.4s ease-in-out;
}
.design_btn9 a:before, .design_btn9 a:after {
content: "";
position: absolute;
top: 0;
width: 50%;
height: 100%;
background: #00466d;
transition: 0.4s;
z-index: -1;
}
.design_btn9 a:before {
right: 0;
}
.design_btn9 a:after {
left: 0;
}
.design_btn9 a:hover:before, .design_btn9 a:hover:after {
width: 0;
}
.design_btn9 a:hover {
color: #00466d !important;
transition: 0.4s ease-in-out;
text-decoration: none;
}