HTML/CSS フロントサイド

CSS,PNG,SVGなどで様々なボタンを作る

どうもシローです。
今回は、UIの要素であるボタンを色々な方法で作成してみようと思います。

CSSのみで作成する

シンプルにCSSのみで作成する方法です。

擬似要素:hover, activeを使って、ホバー時にボタンを暗くして、クリック時にはより暗くしてボタンに影を付けるようにしています。

HTML

css/style.css

画像で作成する

以下のようなボタンの画像を作成しました。

このCSSで通常時には画像の上半分を表示、ホバー時には下半分を表示するようにしてみます。

HTML

css/style.css

擬似要素:activeが付いている場合は画像の左下を基準として表示したいので"left bottom"になっています。

 

SVGで作成する

SVGは解像度によって荒くなったりしないのが特徴です。

pngやjpgと同じようにimgタグで読み込んだり、HTMLのDOMとして直に追加する方法があります。

 

  • この記事を書いた人

シロー

Webシステムの開発のお仕事をさせて頂いております。 フリーランスの日常、Web開発に関する情報を発信しています。 趣味はゲーム、映画鑑賞、個人サービスを作ることです。

-HTML/CSS, フロントサイド
-

© 2021 Shiro's secret base