svg – 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、軽いし綺麗に描画できるしいいですよね。お友達になりたい。

ではでは

代官山綜合法律事務所:参考作品

https://daikanyamalaw.com/

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

どうして見つけたかは全く覚えていないのですが、結構長いこと
「超カッコイイじゃん…！」と思っていたサイトをご紹介します。
（ボタンを紹介する度に書いている、”svgとアニメーションを多用したサイト”というのがこれです）

パスと写真をこんなにうまく組み合わせているサイトを他に見たことがないのです。
パスを使ったパララックスやアニメーションは計算し尽くさないと綺麗に完成できないので、どんだけ頭いい人が作ったんだよ…と思った記憶があります。（今も思ってます）
計算し尽くされた美って、いいですよね。

ウィンドウリサイズしてもぴったり美しくハマります。

少なくとも3年前から存在してデザインも変わっていないのですがこんなにもカッコイイ…。
私の中でカッコイイ&美しいの頂点に君臨し続けるサイトです。
このサイトくらいsvgを華麗に使いこなせるようになることが最近の目標でございます。

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

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

憧れの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を調整してお使いください。