角丸やグラデーションも楽々!CSSだけで作るボタンが簡単に作成できる「CSS Button Generator」

角丸やグラデーションも楽々!CSSだけで作るボタンが簡単に作成できる「CSS Button Generator」

角丸やグラデーションも楽々!CSSだけで作るボタンが簡単に作成できる「CSS Button Generator」
※2018/03/05追記
残念ながら、CSS Button Generatorはサービス終了してしまったようです。

WEBサイトを作成していてボタンを設置したいことって結構あると思います。画像で設置する方も多いと思いますが、最近はCSSだけできれいなボタンが作成できますね。

先日、「CSSだけで角丸のボタンを作成する方法」という記事をエントリーしましたが、この方法は作業が面倒だと感じる方もいるかもしれません。

そういう方は、CSSジェネレータを使うのがいいと思います。ジェネレータを使うと、CSSのボタンなどが簡単に作成できます。そんなジェネレータの中でもボタンの作成に特化したジェネレータが「CSS Button Generator」です。

CSS Button Generatorを使うと、角丸やグラデーションなどの装飾を施したボタンも簡単に作成することが可能です。

CSS Button Generatorの使い方

1. まずは、CSS Button Generatorにアクセスしましょう。

2. アクセスしたら、最初にカラーテーマを選択します。

Color Theme

ベースとなる色を選択して、カスタマイズしていきます。

Color Theme

3. 「Gradient」を操作して、グラデーションを変更します。バーを操作すると上部に表示されているプレビューが変わります。

グラデーション

4. テキストのサイズや影の設定を変更します。

サイズと影

5. ボタンに表示するテキストやフォントを変更します。

テキストとフォント

6. プレビューを見て、これでいいと思ったら、「Code Result」に表示されたCSSコードをコピーします。

CSSコード

※HTMLには、「Code Result」のクラス付きのa要素を貼り付けます。

あとがき

プレビューも表示され直感的にボタンを編集していけるので、非常に作りやすいです。

自分で作成するよりもあきらかに早く作成できるので、作業効率化にも繋がります。

この記事が気に入ったら
いいね!してね♪

Twitter で

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です