マウスオーバー – SASAME craftworks

右にニュッと矢印が出てくるボタン

こんにちは。ささめまです。
仕事に役立つかなと思ってcssや参考作品を集めていたこのブログが実際に仕事で役立って、えも言われぬ達成感を感じています。略してエモい。

今回は矢印がふわっとにゅっと出てくるボタンをご紹介します。

＼コピペでそのまま使えます／

demo

code

<a href="" class="button_link">
	<span>
		Hover me
		<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 36.1 25.8" enable-background="new 0 0 36.1 25.8" xml:space="preserve"><g><line fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" x1="0" y1="12.9" x2="34" y2="12.9"></line><polyline fill="none" stroke="#ffffff" stroke-width="3" stroke-miterlimit="10" points="22.2,1.1 34,12.9 22.2,24.7   "></polyline></g></svg>
	</span>
</a>

.button_link {
	color: #ffffff;
	background-color: #81d8d0;
	display: inline-block;
	position: relative;
	transition: background-color 300ms ease-out;
}

.button_link span {
  display: inline-block;
  position: relative;
  transition: all 300ms ease-out;
  will-change: transform;
}

.button_link:hover span {
  transform: translate3d(-1rem, 0, 0);
}

.button_link svg {
  position: absolute;
  width: 1.1em;
  right: 0px;
  right: 0rem;
  opacity: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: all 300ms ease-out;
  will-change: right, opacity;
	stroke-width: 5;
	stroke-color: transparent;
}

.button_link:hover svg {
  opacity: 1;
  right: -3rem;
}

design

マウスオーバーすると文字が左にずれて、右側に矢印がしゅっと現れるボタンです。
動きが滑らかで気持ちいいので何度でもマウスオーバーしたくなるデザインだったのでご紹介しました。
svg、軽いし綺麗に描画できるしいいですよね。お友達になりたい。

ではでは

マウスオーバーで線をなぞるボタン

こんにちは。ささめまです。

ボタンの枠が塗りつぶされていくcssをご紹介します。

＼コピペでそのまま使えます／

demo

button

html

<a href="#" class="button_link">
	<p>button</p>
	<div class="hover"></div>
	<div class="hover_bottom"></div>
</a>

css

.button_link {
	width: 280px;
	height: 40px;
	text-decoration: none;
	display: block;
	border: solid 2px #eeeeee;
	position: relative;
}
.button_link p {
	margin: 0 auto;
	color: #81d8d0;
	text-align: center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}
.button_link:hover .hover:before,
.button_link:hover .hover:after {
	opacity: 1;
	-webkit-animation: openA 0.4s;
	animation: openA 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
	animation-direction: normal;
}
.button_link:hover .hover_bottom:before,
.button_link:hover .hover_bottom:after {
	opacity: 1;
	-webkit-animation: openB 0.4s;
	animation: openB 0.4s;
	animation-delay: 0.4s;
	animation-fill-mode: forwards;
	animation-timing-function: cubic-bezier(0.39, 0.575, 0.565, 1);
	animation-direction: normal;
}
.hover {
	width: 100%;
	height: 40px;
	position: absolute;
	top: -2px;
}
.hover:before {
	content: "";
	width: 0;
	height: 0;
	border-top: solid 2px #81d8d0;
	border-left: solid 2px #81d8d0;
	display: block;
	opacity: 0;
	position: absolute;
	right: 138px;
}
.hover:after {
	content: "";
	width: 0;
	height: 0;
	border-top: solid 2px #81d8d0;
	border-right: solid 2px #81d8d0;
	display: block;
	opacity: 0;
	position: absolute;
	left: 138px;
}
.hover_bottom {
	width: 100%;
	height: 40px;
	position: absolute;
	bottom: -2px;
}
.hover_bottom:before {
	content: "";
	width: 0;
	height: 40px;
	border-bottom: solid 2px #81d8d0;
	display: block;
	opacity: 0;
	position: absolute;
	right: 0;
}
.hover_bottom:after {
	content: "";
	width: 0;
	height: 40px;
	border-bottom: solid 2px #81d8d0;
	display: block;
	opacity: 0;
	position: absolute;
	left: 0;
}
@keyframes openA {
	0% {
		width: 0;
		height: 0;
	}
	50% {
		width: 140px;
		height: 0;
	}
	100% {
		width: 140px;
		height: 40px;
	}
}
@keyframes openB {
	0% {
		width: 0px;
	}
	100% {
		width: 140px;
	}
}

design

私が紹介するボタンにしてはcssが長いですね笑

シンプルな線のボタンですが、一味違うなと思わせるアニメーションです。
私自身がフロントエンドをやっていることもあってか、工夫してるなーと感心したボタンデザインでした。

※実際サイズとか形変えたりしようとするとpositionの調整が必要で、なかなか大変でした！！
でも完成品はとてもかっこいい…！やる価値はあると思います。

ではでは

マウスオーバーでネオンサインみたいに光るボタン

こんにちは。ささめまです。
生きてます！！死にそうになってたけど！出産しました！わーい

今回はネオンサインのように光るボタンをご紹介します。

＼コピペでそのまま使えます／

demo

button

code

<a href="#" class="button_link">button</button>

.button_link {
	width: 280px;
	height: 40px;
	color: #ffffff;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	background-color: #81d8d0;
	display: block;
	transition: all 0.3s ease;
}
.button_link:hover {
	text-shadow:
		0 0 10px rgba(255,255,255, 1),
		0 0 50px rgba(255, 255, 255, .8),
		0 0 75px rgba(255, 255, 255, .6),
		0 0 76px rgba(255, 255, 255, .4),
		0 0 77px rgba(255, 255, 255, .5),
		0 0 78px rgba(255, 255, 255, .4),
		0 0 79px rgba(255, 255, 255, .3),
		0 0 80px rgba(255, 255, 255, .2),
		0 0 85px rgba(255, 255, 255, .1);
}

design

シャドウをいじくってネオンが光るようにジワッと光らせます。
黒背景のサイトに絶対とってもよく映える！！！！

タイトルとかにもおすすめなcssなのでぜひ使ってみてください

マウスオーバーで囲み線を描画するボタン

こんにちは。ささめまです。

モードとかシンプルとかオシャレという言葉が似合うサイトに使いたいホバーエフェクトをご紹介します。

＼コピペでそのまま使えます／

demo

button

code

<a href="#" class="button_link">button</a>

.button_link {
	width: 280px;
	color: #81d8d0;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	border: 2px solid #81d8d0;
	background: transparent;
	display:block;
	position: relative;
	transition:all 0.3s ease-in-out;
}
.button_link:before,
.button_link:after {
	content: '';
	width: 18px;
	height: 18px;
	border-color: #81d8d0;
	box-sizing: border-box;
	border-style :solid;
	display: block;
	position: absolute;
	transition: all 0.3s ease-in-out;
}
.button_link:before {
	top: -6px;
	left: -6px;
	border-width: 2px 0 0 2px;
	z-index: 5;
}
.button_link:after {
	bottom: -6px;
	right: -6px;
	border-width: 0 2px 2px 0;
}
.button_link:hover:before,
.button_link:hover:after {
	width: calc(100% + 12px);
	height: calc(100% + 12px);
	border-color: #81d8d0;
}
.button_link:hover {
	color: #fff;
	background-color: #81d8d0;
	border-color: #81d8d0;
}

design

カギカッコのようにボタンを囲った線を、マウスオーバーでしゅっと伸ばすcssです。
オシャレ感ある。

フォントを変えるとモード感が出るので、遊びのあるサイトで使ってみたいなあと思ってます。

マウスオーバーでボタンを二重の四角で囲うホバーアニメーション

こんにちは。ささめまです。

最近制作開始した細い線の多いサイトに使いたいなーと思っているボタンをご紹介します。

＼コピペでそのまま使えます／

demo

button

code

<a href="#" class="button_link">button</a>

.button_link {
	width: 280px;
	height: 40px;
  color: #81d8d0;
	text-align: center;
	text-decoration: none;
	display: block;
	position: relative;
}

.button_link::after, .button_link::before {
  content: "";
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border: 1px solid;
  transition: all 0.6s ease;
  border-radius: 2px;
}

.button_link::after {
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #81d8d0;
  border-right-color: #81d8d0;
}

.button_link::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #81d8d0;
  border-left-color: #81d8d0;
}

.button_link:hover:after, .button_link:hover:before {
  border-bottom-color: #81d8d0;
  border-right-color: #81d8d0;
  border-top-color: #81d8d0;
  border-left-color: #81d8d0;
  width: calc(100% - 4px);
  height: calc(100% - 4px);
}

design

鉤括弧風の飾りに囲まれたボタンにカーソルを合わせると、飾りがひゅーんと伸びて二重の囲い線になります。
以前ご紹介したマウスオーバーで二重線が一本に揃うオシャレアニメーションボタンのアニメーション発火前と同じデザインですね笑
こういうデザインだーい好き！
今後も思いついたら書き残します。

マウスオーバーでふわっとオシャレに下線を表示する方法 top to bottom

こんにちは。ささめまです。

おしゃれサイトでよく見るホバーエフェクトをご紹介します。
（こちらもまた以前制作した銀座蔦屋書店2020年クリスマス特設サイトに使用したボタンです。）

＼コピペでそのまま使えます／

demo

link text

code

<p><a href="#" class="link_text">link text</a></p>

.link_text {
	line-height: 1.2;
	text-decoration: none;
	position: relative;
	display: inline-block;
	-webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.link_text::after {
	content: '';
	width: 100%;
	height: 1px;
	background: #999;
	opacity: 0;
	visibility: hidden;
	transition: 0.3s;
	position: absolute;
	bottom: 2px;
	left: 0;
}

.link_text:hover {
	color: #777;
}

.link_text:hover::after {
	bottom: -4px;
	opacity: 1;
	visibility: visible;
}

comment

マウスオーバーした際の色は、文字と下線が同じ色に見えるように、文字：#777と下線：#999と若干変えています。
あくまで同じ色に見えることを重視！