線 – SASAME craftworks

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

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

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

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

demo

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の調整が必要で、なかなか大変でした！！
でも完成品はとてもかっこいい…！やる価値はあると思います。

ではでは

マウスオーバーで囲み線がシュルッと消えるアニメーションボタン

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

憧れのsvg駆使しまくりのオシャレサイトに使いたいボタンをご紹介します。
（憧れのオシャサイトは近日中に参考作品としてご紹介します！）

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

demo

button

code

<a href="#" class="button_link">
  <svg width="280" height="40">
     <rect x="0" y="0" rx="20" fill="none" width="280" height="40"></rect>
  </svg>
  <span>button</span>
</a>

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

.button_link svg {
	position: absolute;
	top: 0;
	left: 0;
}

.button_link svg rect {
	stroke: #81d8d0;
	stroke-width: 1;
	stroke-dasharray: 353, 0;
	stroke-dashoffset: 0;
	-webkit-transition: all 600ms ease;
	transition: all 600ms ease;
}

.button_link:hover svg rect {
	stroke-width: 1;
	stroke-dasharray: 165, 543;
	stroke-dashoffset: 370;
}

design

マウスオーバーすると枠の線がくるんっと消えていき、下線のみ残るアニメーションです。
ん〜〜いいアニメーション…。
demoみたいに線細く作ると造型のアラが目立ってしまうので、太めにした方が合いそうです。
ボタンの大きさによってstroke-dasharrayとstroke-dashoffsetを調整してお使いください。

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

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

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

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

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

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

マウスオーバーで二重線が一本に揃うオシャレアニメーションボタン

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

ここ3年くらい細い線を多用したサイトがかっこいいなーと思ってて、時間があればいい感じの素材を探しています。
今度の案件でシンプル上品なイメージをリクエストされているので、情報収拾の成果が出せそうな予感がしております(ワクワク)

目星をつけていたホバーエフェクトの1つを紹介します。

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

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: inline-block;
	position: relative;
}

.button_link:after, .button_link:before {
	content: "";
	border: 1px solid #81d8d0;
	transition: transform 0.2s;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

.button_link:after {
	transform: translate(3px, 3px);
}
.button_link:before {
	transform: translate(-3px, -3px);
}
.button_link:hover:after, .button_link:hover:before {
	transform: translate(0);
}

design

線をずらして表示したボタンにカーソルを合わせると、シュッと1本線に重なります。おしゃれー！
いつか使いたいボタンアニメーションのひとつです！
使ったらこのブログでご報告しますね。