2019年06月17日(月)

コピペで簡単に利用できる、CSSアニメーションを使ったボタン・スピナーのコレクション -CSS Wand

• 0
• 100
• 45
• 116

コピペで簡単に利用できる、CSSアニメーションを使ったボタン・スピナーのコレクションを紹介します。ボタンのホバーエフェクトやローディング用のアニメーションが用意されており、商用でも無料で利用できます。

CSS Wand
CSS Wand -GitHub

CSS Wandの利用は下記ページから。

CSS Wand

使用したいボタンやスピナーをクリックすると、実装コードが表示されます。
右上のボタンをクリックすると、コードをコピーできます。

author:

コリス

http://coliss.com

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログ

オリジナルサイトで続きを読む

今日のwebデザイン記事ランキングを見る

         

‹ PREV

               

プロダクトをより良い方向へと導くための２つの問い

         

NEXT ›

               

簡単に描いた落書きから写真のようにリアルな画像を自動生成するツール -GauGAN

関連記事

• HTMLとCSSで勉強すべきことがしっかりまとめられている、アクセシビリティやパフォーマンスを考慮した実装を学べる良書 -モダンHTML＆CSS 現場の新標準ガイド
• Tailwind及びMotionでデザインされたアニメーションUIを実装する為のReactコンポーネント・「Animate UI」
• 実は難しい！ CSSのborder-radiusで実装した角丸を矩形からスムーズにアニメーションさせるテクニック
• Web制作者はダウンロードしておきたい！ CSS関連の最新版チートシートのまとめ
• motion.jsとlucide iconsで構築されたシンプルなアニメーション付きアイコンライブラリ・「pqoqubbw/icons」

Ads

2006年の開設以来、一貫してサイト制作に関する最新情報を提供しているクリエイティブブログコリスの記事『コピペで簡単に利用できる、CSSアニメーションを使ったボタン・スピナーのコレクション -CSS Wand』についてまとめています。

この記事は特にアニメーションについて書かれており、 気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のコリスで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとコリスの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。