JSや画像は使用せず、CSSのみでデザイン・アニメーション実装されたトグルボタン「A bunch of funky CSS3 Toggle Buttons」

Tips

JSや画像は使用せず、CSSのみでデザイン・アニメーション実装されたトグルボタン「A bunch of funky CSS3 Toggle Buttons」

CodePenで見かけたのでご紹介。
アニメーションはJavaScriptを使わず、見た目に関しても画像を使わずにと、全てCSSを使って実装されているトグルボタンです。
CSSでこのような動きを実装するというのはいろいろなサイトで紹介されていますが、見た目が面白いなと思ったのが幾つかあったのでご紹介します。

種類は下記キャプチャにある全8種類で、HTMLは<input type="checkbox" />label要素が使用されています。
それぞれボタンがスライドしたり押した感じのアニメーション付きで、transitionanimationといったCSSを使って実装されており、月・太陽・笑顔・泣顔などの見た目が画像のような箇所に関しても全て擬似要素を使ったり、box-shadowborder-radiusなどのプロパティを使って表現されています。

A bunch of funky CSS3 Toggle Buttons

いずれも Dribbble にアップされている作品や CodePen で公開されているものからインスピレーションもらって作成したようなのですが、CSSの勉強をする際に同じようにこういったサイトで公開されているものを自分なりにCSSで実装してみたりすると、楽しみながらいろいろと勉強にもなっておすすめです。

自分もたまにDribbbleで見た目やアニメーションが面白いと思った作品を試しにCSSで実装してみることがあるんですが、そのまま案件等で使用することはないにしても、新たな発見やよりシンプルに記述できる方法を見つけたりすることが多いです。

実際の動きは下記で確認することができ、CodePenなのでそれぞれどのようなコードで実装をしているのかも確認できます。

※確認の際はChromeやFirefox、IEなら10以上で閲覧してください。

Posted on

Category : Tips

Close the search window,
please press close button or esc key.