ボタンの作成

こんにちは。
今回は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属性に変更することで、右からのアニメーションに変更することも可能です。

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

ボタンの種類はたくさんあって紹介しきれないのでリンクを張っておきます。
いろんなボタンデザイン→https://dubdesign.net/download/html-css/button-design/

つい最近にアニメーションのやり方を学んで実際に使ってみるととても難しかったです。
自由度が高いので自分のオリジナルが作れるようになると面白いかもです。