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として直に追加する方法があります。

 


タグ:

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として直に追加する方法があります。

 

タグ: