CSSのアニメーションを使った、ボタンのホバーエフェクトや、ローダーがコピペで利用できるサイトです。
使い方はとてもシンプルで、WEB初心者の方でも簡単に実装できます。
![](https://www.ameamelog.com/wp/wp-content/uploads/2019/08/css-wand_01.png)
![](https://raw.githubusercontent.com/oliver-gomes/csswand/master/public/github-bg.png)
CSSWAND
現状数は少ないですが、汎用性のあるアニメーションが用意されています。
それでは使い方をご紹介します。
使い方
画面中央あたりにある「ALL」を選択していると、ボタンのホバーエフェクトとローダーが表示されます。
「Hover」「Loading」を選ぶと種類ごとに分類できます。
![](https://www.ameamelog.com/wp/wp-content/uploads/2019/08/css-wand_02.png)
実装したい動きが決まったら、ボタンをクリックします。
![](https://www.ameamelog.com/wp/wp-content/uploads/2019/08/css-wand_03.png)
するとHTML・CSSがポップアップで表示されるので、自分のサイトにそれぞれコピペするだけです。
2つほどコピペで実装してみました。
20秒程度で実装できました。とても簡単!
色を変えたい場合
あまり使う機会がなさそうではありますが、ページ中央あたりに「スポイトアイコン」があります。
![](https://www.ameamelog.com/wp/wp-content/uploads/2019/08/css-wand_04.png)
これをクリックするとカラーピッカーが表示されます。
![](https://www.ameamelog.com/wp/wp-content/uploads/2019/08/css-wand_05.png)
ここで色を選んで、カラーコード部分をクリックするとクリップボードにコピーされます。
あとはCSSの「background-color」「border」の部分に差し替えれば色が変わります。
![](https://raw.githubusercontent.com/oliver-gomes/csswand/master/public/github-bg.png)
CSSWAND
まとめ
ここまでUIがシンプルなサイトはあまり見かけないと思います。
HTMLやCSSが初心者の方でも迷うことなく実装できると思うので、活用してみてください。
きれいなグラデーションのボタンをCSSで実装したい場合はこちらの記事でご紹介しています。