NKBlog

こんにちは。
今回はHTMLとCSSでボタンの作成について書いていきます。

通常のボタン

通常のボタンはHTMLから<button></button>で囲うだけで作ることができます。
また、<a href=”#”></a>でもボタンを作ることができます。
もちろんbackground-colorで色を変えたりwidthなどで大きさの調整もできます。

角丸のボタン

ボタンもborder-radiusを使うことによって丸いボタンも作れます。

また調節をすればまんまるのボタンも作れたりします。

立体的なボタン

box-shadowを使えば立体的なボタンを作ることもできます。
box-shadowは横、縦の位置を決め、影の色を指定できます。

ボタンのアニメーション

このアニメーションは、.effectのleft属性をright属性にし、.animation:hover .effect のleft属性をright属性に変更することで、右からのアニメーションに変更することも可能です。

ボタンは色々なアニメーションで表示することができます。
今紹介したアニメーションは結構簡単な方で他にも色々なアニメーションがあって面白いです。