コピペでできる！CSSとhtmlだけのホバーエフェクトが楽しい矢印アクション

CSS HTML
 2018.02.22
 2018.03.19

ランディングページやキャンペーンサイトなどでは全画面イメージからスクロールさせるような場合が多くあります。
下にスクロールさせたいけど矢印に気づいてもらえないなんてことになってはもともこもありませんね。
そこで使えるのが、スクロールを促すための矢印アクションです。
目立ちすぎず、でも気がつきやすいホバーエフェクトを備えた矢印をご用意しました。

browser:  65 11 20 10 

ホバーエフェクトが楽しい矢印アクション

HOVERで矢印の周りの円がくるっと出てくる

ニャン易度
svgで作成した画像を変更する 
<div class="cp_arrows">
	<a class="link cp_arrow" href="#">svgで作成した画像を変更する
	<svg class="arrow_icon" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewbox="0 0 32 32">
	<g fill="none" stroke="#039BE5" stroke-width="1.5" stroke-linejoin="round" stroke-miterlimit="10">
	<circle class="arrow_icon_circle" cx="16" cy="16" r="15.12"></circle>
	<path fill="#039BE5" d="M22.364 14.55L17 19.914V8h-2v11.914L9.636 14.55l-1.414 1.414L16 23.742l7.778-7.778z"/>
	</g>
	</svg>
	</a>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .link {
	cursor: pointer;
	text-decoration: none;
	color: #039be5;
}
.cp_arrows .cp_arrow {
	line-height: 2rem;
	display: inline-block;
	height: 2rem;
}
.cp_arrows .cp_arrow .arrow_icon {
	position: relative;
	top: -1px;
	-webkit-transition: -webkit-transform 0.3s ease;
	        transition: -webkit-transform 0.3s ease;
	        transition:         transform 0.3s ease;
	        transition:         transform 0.3s ease, -webkit-transform 0.3s ease;
	vertical-align: middle;
}
.cp_arrows .cp_arrow .arrow_icon_circle {
	-webkit-transition: stroke-dashoffset 0.3s ease;
	        transition: stroke-dashoffset 0.3s ease;
	stroke-dasharray: 95;
	stroke-dashoffset: 95;
}
.cp_arrows .cp_arrow:hover .arrow_icon {
	-webkit-transform: translate3d(5px, 0, 0);
	        transform: translate3d(5px, 0, 0);
}
.cp_arrows .cp_arrow:hover .arrow_icon_circle {
	stroke-dashoffset: 0;
}

HOVERで三つの矢印が一つにまとまる

ニャン易度 
<div class="cp_arrows">
	<a href="#" class="cp_arrowcontainer">
	<div class="cp_arrow"></div>
	<div class="cp_arrow"></div>
	<div class="cp_arrow"></div>
	</a>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrowcontainer {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100px;
	height: 100px;
	-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
	        transform: translate(-50%, -50%) rotateZ(0deg);
}
.cp_arrows .cp_arrowcontainer:hover {
	cursor: pointer;
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
	top: 50%;
}
.cp_arrows .cp_arrow {
	position: absolute;
	left: 50%;
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	display: block;
	width: 4px;
	height: 50px;
	content: '';
	-webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	-webkit-transform: translate(-50%, -50%) rotateZ(-65deg);
	        transform: translate(-50%, -50%) rotateZ(-65deg);
	transform-origin: bottom right;
	border-radius: 10px;
	background: #FF5722;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: translate(-50%, -50%) rotateZ(65deg);
	        transform: translate(-50%, -50%) rotateZ(65deg);
	-webkit-transform-origin: bottom left;
	        transform-origin: bottom left;
}
.cp_arrows .cp_arrow:nth-child(1) {
	top: 30%;
	opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {
	top: 50%;
	opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {
	top: 70%;
	opacity: 1;
}

HOVERで三つの矢印が一つにまとまりながら縮まる

ニャン易度 
<div class="cp_arrows">
	<a href="#" class="cp_arrowcontainer">
	<div class="cp_arrow"></div>
	<div class="cp_arrow"></div>
	<div class="cp_arrow"></div>
	</a>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_arrowcontainer {
	position: absolute;
	top: 50%;
	left: 50%;
	display: block;
	width: 100px;
	height: 100px;
	-webkit-transform: translate(-50%, -50%) rotateZ(0deg);
	        transform: translate(-50%, -50%) rotateZ(0deg);
}
.cp_arrows .cp_arrowcontainer:hover {
	cursor: pointer;
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
	top: 50%;
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:before {
	-webkit-transform: translate(-50%, -50%) rotateZ(-45deg);
	        transform: translate(-50%, -50%) rotateZ(-45deg);
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:after {
	-webkit-transform: translate(-50%, -50%) rotateZ(45deg);
	        transform: translate(-50%, -50%) rotateZ(45deg);
}
.cp_arrows .cp_arrow {
	position: absolute;
	left: 50%;
	-webkit-transition: all 0.3s ease-in;
	        transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:before, .cp_arrows .cp_arrow:after {
	position: absolute;
	display: block;
	width: 4px;
	height: 50px;
	content: '';
	-webkit-transition: all 0.3s ease-in;
	        transition: all 0.3s ease-in;
	-webkit-transform: translate(-50%, -50%) rotateZ(-60deg);
	        transform: translate(-50%, -50%) rotateZ(-60deg);
	transform-origin: bottom right;
	border-radius: 10px;
	background: #009688;
}
.cp_arrows .cp_arrow:after {
	-webkit-transform: translate(-50%, -50%) rotateZ(60deg);
	        transform: translate(-50%, -50%) rotateZ(60deg);
	-webkit-transform-origin: bottom left;
	        transform-origin: bottom left;
}
.cp_arrows .cp_arrow:nth-child(1) {
	top: 30%;
	opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {
	top: 50%;
	opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {
	top: 70%;
	opacity: 1;
}

HOVERで円の中の矢印がぐるっと回って戻る

ニャン易度 
<div class="cp_arrows">
	<div class="cp_round">
	<span></span>
	<span></span>
	<span></span>
	<span></span>
	</div>
</div>
.cp_arrows *, .cp_arrows *:before, .cp_arrows *:after {
	-webkit-box-sizing: border-box;
	        box-sizing: border-box;
}
.cp_arrows {
	position: relative;
	display: flex;
	height: 300px;
	margin: 2em auto;
	justify-content: center;
	align-items: center;
}
.cp_arrows .cp_round {
	position: relative;
	width: 100px;
	height: 100px;
	border: 3px solid #42a5f5;
	border-radius: 100%;
	cursor: pointer;
}
.cp_arrows span {
	position: absolute;
	z-index: 999;
	display: block;
	width: 35px;
	height: 5px;
	-webkit-transition: 0.4s ease-in;
	transition: 0.4s ease-in;
	border-radius: 3px;
	background: #42a5f5;
}
.cp_arrows span:first-child {
	bottom: 30%;
	left: 18%;
	transform: rotate(30deg);
}
.cp_arrows span:nth-child(2) {
	bottom: 30%;
	left: 47%;
	transform: rotate(-30deg);
}
.cp_arrows span:nth-child(3) {
	bottom: 55%;
	left: 18%;
	transform: rotate(30deg);
}
.cp_arrows span:nth-child(4) {
	bottom: 55%;
	left: 47%;
	transform: rotate(-30deg);
}
.cp_arrows .cp_round:hover span:nth-child(1) {
	transform: rotate(-155deg);
}
.cp_arrows .cp_round:hover span:nth-child(2) {
	transform: rotate(155deg);
}
.cp_arrows .cp_round:hover span:nth-child(3) {
	transform: rotate(205deg);
}
.cp_arrows .cp_round:hover span:nth-child(4) {
	transform: rotate(-205deg);
}

copypet.jp

CSS3などで新たに追加された要素･装飾方法など、日々コードを書いていないと忘れてしまったり、ささっとプロトタイプを作る時などちょっとしたことに時間をかけている暇はない。そんな時に「あ〜、あれストックしときゃよかったなぁ」って困った自分用のストックブログです。カスタマイズなどがしやすいよう、昨今のweb制作に取り入れられる一般的なコードを中心に掲載しています。

More Info

こんな記事はいかがですか？