2018年02月18日(日)

ボタンにSVGを使って水がせりあがる様なホバーエフェクト

• 0
• 1
• 5
• 34

Result

See the Pen Mana Button by kachibito (@kachibito) on CodePen.

SVGを使うといろいろ作れて楽しいですね。
HTMLで書いた自作のSVGをurl()フィルターで参照しています。

css

.c-button--gooey {/*ボタンの基本スタイル*/ color: #06c8d9; font-size: 1.3em; text-transform: uppercase; letter-spacing: 2px; border: 4px solid #06c8d9; border-radius: 0; padding: 1.2em 3.4em; position: relative; transition: all 700ms ease; } .c-button--gooey .c-button__blobs {/*HTMLで書いたSVGを参照*/ height: 100%; filter: url(#goo); overflow: hidden; position: absolute; top: 0; left: 0; bo...