トップ > Webデザイン > スタイリッシュなキラキラボタンの作成手法: HTMLとCSSで魅惑のエフェクトを実装③
最終更新日

スタイリッシュなキラキラボタンの作成手法: HTMLとCSSで魅惑のエフェクトを実装③

Webデザイン ボタンデザイン アニメーション Google Fonts FontAwesome

Font Awesome

エッフェル塔の夜景


HTMLとCSSでつくる🎨キラキラボタン✨の作成方法③

アニメーションとスタイリングによって、ボタンが魅力的に光り輝くエフェクトを実現します。
さらにGoogleフォントを使用してフォントスタイルを設定し、Font Awesomeアイコンを組み込んでボタンを彩ります。


クリックで目次を開閉


Font Awesomeアイコンの組み込み

フォントの次はアイコンです。

ボタンに魅力的なアイコンを追加するために、Font Awesomeというライブラリを使用することができます。

Font Awesomeは無料と有料のものがありますが、無料でも基本的なアイコンは相当数網羅されています。さまざまな種類のアイコンを簡単にWeb ページに組み込むことができる便利なツールです。

以下に組み込み手順を説明します。

fontawesome.com

Only "display:flex;"

 kaeru-kun

 kiwi-sensei

 rakko-chan

 kaba-san

 

Arrangement change with "justify-content"

 kaeru-kun

 kiwi-sensei

 rakko-chan

 kaba-san


こんな感じでかわいいアイコンが色々あります。カラーやアニメーションもかんたんに付けられます。


1. Font Awesomeライブラリのリンク

まず、Font Awesomeライブラリを読み込むためのリンクを追加します。CDN *1 という、外部サーバを利用します。
これにより、Font Awesomeのアイコンを使用するための準備が整います。
下の2行あるコードを<head>にペーストしてください。 ※なお、最新のFont Awesomeバージョンはこちらで確認できます。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation@1.1.1/css/font-awesome-animation.min.css">

なお、2行目のコードは、Font Awesomeが提供するアイコンアニメーションのためのlinkです。
アニメーションが不要な場合、もしくはCSSで自分でアニメーションをコーディングする場合などは、1行目のコードのみでOK!です。

 

2. アイコンの追加

Font Awesomeライブラリを読み込んだら、自由にアイコンを配置できます。さきほどのFont Awesomeのページへ行き画像から選ぶか、または検索窓から文字でも探せます。

※無料の「Free」版と有料の「Pro」版があります。プロ版を配置してもうまく表示されなかったりしますので、注意しましょう♪

 

 

今回は、星のアイコンを選んでいます。以下のコードをボタン内<button～button>に挿入することで、アイコンを表示します。

<button class="glitter-button"><i class="fas fa-star"></i>Click Here!</button>

 

なお、はてなブログで「Font Awesome」を適用すると、若干自動でコードが書き換わります。

たとえば、カバさんのアイコンだと、Font Awesomeのページにあるコードは

<i class="fa-solid fa-hippo"></i>

なのですが、のようにiの部分がemと変化します（コピペで自動に書き換わる）。

<em class="fa-solid fa-hippo"> kaba-san</em>

※Markdown記法ではそのまま。

 

ちょっと休憩~　ﾄﾞｰｿﾞ(∩´｡•ω•)⊃🍵

 

あと気を付けるのは、基本的にHTMLに書き込んで使うのですが、たとえば以下の2行を書いた場合、上の1行は何もなかったかのように跡形もなく書いたコードは消え去ります……(ﾟ∀ﾟll)｡o

 

①

<i class="fa-solid fa-hippo"></i>

きえる……(ﾟ∀ﾟll)｡o

②

<i class="fa-solid fa-hippo"> kaba-san</i>

kaba-san

i がem に自動で書き換わる

 

これは、コピペして来たアイコンを適用しているコード<i class="fas fa-solid fa-hippo"</i>の中に、何かテキストを配置しておかないと起きる現象です（はてな仕様）。

裏ワザ的な対策として、『&nbsp;』という記号（HTMLエンティティ）を入れておけば、アイコンだけ置きたい時など、余分な文字を入れずに済みます。

【参照用】HTMLエンティティ：「 」とか「:」とか - hatebcustom

【参照用】HTMLエンティティ：「 」とか「:」とか - hatebcustom

HTMLエンティティは、ウェブ開発者にとって不可欠なツールです。HTMLエンティティはアンパサンド(&)で始まりセミコロン(;)で終わるテキストの一固まりで、特殊文字や予約済み文字の表示に使用されます。 さらに、HTMLエンティティはセキュリティ上も重要です。また、エンティティを使用することで、異なる文字エンコーディングやブラウザの互換性の問題を回避し、ウェブコンテンツの一貫性を維持できます。

rubirubi.hateblo.jp

せっかく書いたコードが消えてやりなおしになってしまうので、注意してくださいね。

※Markdown記法では対処不要です。

 

3. アイコンにアニメーションを追加

サンプルのボタンには、星のアイコンにアニメーションで瞬くような演出をちょこっと施しています。以下コード解説です。だいぶん遠くまで来た（笑）ので、改めてにその部分のコードのみを再度、記します。

 

/* ぼわーっと光るICON */
.fas.fa-star {
    position: relative;
    animation: glitterAnimation 5s ease-in-out infinite;
    color: yellow;
}

@keyframes glitterAnimation {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.7;
    }
    20% {
        transform: scale(0.8);
        opacity: 0.8;
    }
    0.1% {
        transform: scale(0.9);
        opacity: 1;
    }
    30% {
        transform: scale(0.75);
        opacity: 0.75;
    }
}
 
  1. .fas.fa-star:
    Font Awesomeの星アイコンを指定。アイコンに対するスタイルやアニメーションの定義。
  2. position: relative;:
    アイコンの位置を相対的に設定。この設定により、アイコンに他の要素を重ねることが可能になる。
  3. animation: glitterAnimation 5s ease-in-out infinite;:
    アイコンにアニメーションを適用。「glitterAnimation」という任意のクラス名でアニメーションを指定しており、アニメーション時間は5秒( 5s )、動作はイージング（ease-in-out）*2で、無限に繰り返されるように設定。
  4. color: yellow;:
    アイコン（星）の色を黄色に設定。
  5. @keyframes glitterAnimation { ... }:
    アニメーションのキーフレームを定義。アニメーションの詳細な動作を制御するために使用。このキーフレーム内にアニメーションの各ステップごとの設定を記述。
    • ・0%, 100%: アニメーションの初めと終わりの状態を指定しています。スケール（大きさ）を0.8倍にし、不透明度を0.7に設定しています。
    • ・20%: アニメーションの途中で、スケールを0.8倍、不透明度を0.8に変更しています。
    • ・0.1%: アニメーションの途中で、スケールを0.9倍、不透明度を1に変更しています。非常に短い時間で起こるため、ほとんど変化しないように見えます。
    • ・30%: アニメーションの途中で、スケールを0.75倍、不透明度を0.75に変更しています。

これにより、星アイコンが一定のタイミングで拡大・縮小し、不透明度が変化することでキラキラ（というよりサンプルはボワーッ？）と点滅するエフェクトが実現されています。



CSSを使用したホバーエフェクト: 回転、フリップ、浮き上がり、色変化の実装方法 - hatebcustom

CSSを使用したホバーエフェクト: 回転、フリップ、浮き上がり、色変化の実装方法 - hatebcustom

この記事では、カスタムCSSを使用してウェブボタンに魅力的なホバーエフェクトを実装する方法を解説します。色の変化、浮き上がり、フリップ、回転など、さまざまなアニメーション効果をボタンに適用し、ウェブデザインをより魅力的にする手順を詳細に紹介します。CSSの基本から高度なテクニックまで、デザイナーとフロントエンド開発者向けの実用的なガイドとなっています。 記事を通じて、カスタムボタンデザインの実装に必要なコードや概念を理解し、ウェブサイトのユーザーエクスペリエンスを向上させる方法を学びましょう。

rubirubi.hateblo.jp


総括・まとめ

HTMLとCSSを使用してキラキラ光るボタンを作成する手法を解説しました。アニメーションとスタイリングを組み合わせて、魅力的なエフェクトを持つボタンを作成することが可能です。またGoogleフォントの利用、Font Awesomeアイコンを組み込む手順にも触れました。

記事内で取り上げた主要なポイントは次の通りです。


1. キラキラ光るエフェクト

擬似要素（::before）を使用して、ボタンにキラキラ光るエフェクトを適用しました。これにより、ボタンがキラン、と輝くようなアニメーションを実現しました。

2. Googleフォントの活用

'Sigmar' フォントをGoogle Fonts から読み込み、ボタンテキストに適用しました。フォントの選択により、デザインが個性的になります。

3. Font Awesomeアイコンの組み込み

Font Awesomeライブラリを使用して、ボタンにアイコンを追加する方法を紹介しました。アイコンの選択とアニメーションの適用で、ボタンにダイナミックな要素が加わりましたね。


これらの手法の組み合わせで、Webページにおしゃれで魅力的なボタンを作成することができます。デザインとアニメーションの組み合わせは、ユーザーエクスペリエンス向上に効果的です。

ウェブデザインやフロントエンド開発において、こうしたテクニックを活用することで、ユーザーに強い印象を与えるWebページを制作することが出来そうですね。自分なりのアイディアをプラスし、よりクリエイティブで魅力的なボタンを作成してみましょう~

今週のお題は「パイナップル」！

自己紹介
出身：南アメリカ
栄養：ビタミンCやマンガン、食物繊維が豊富。
効能：炎症の抑制、消化の促進、抗酸化作用、免疫力向上
意外性：肉にあう

はてなブログ：blog作成備忘録① - CSS Cheat Sheet - - hatebcustom

はてなブログ：blog作成備忘録① - CSS Cheat Sheet - - hatebcustom

CSS備忘録です。

rubirubi.hateblo.jp

1

2

3

↼ Googleフォントで文字を可愛く♪


*1:CDN（Content Delivery Network）は、外部のサーバーからデータ（例：画像、ファイル）を効率的に読み込むテクノロジーで、ウェブサイトやアプリケーションの速度向上に寄与します。 CDNはデータを地理的に近いサーバーに配置し、ユーザーがコンテンツにより迅速にアクセスできるようにし、ウェブページの読み込み時間を短縮します。Font AwesomeなどのアイコンフォントもCDNを活用し、高速で品質の高いアイコンを提供し、ユーザーエクスペリエンスを向上させます。

*2:イージング（easing）は、アニメーションの進行速度や変化のスムーズさを制御するためのプロパティです。アニメーションが開始してから終了までの間に、要素がどのように変化するかを指定します。イージングは、アニメーションがどのように進行するかに影響を与え、アニメーションがより自然な見た目になるようにします。
`ease-in-out`は、一般的なイージングの1つで、アニメーションが始まるときにゆっくりと始まり、途中で一時的に速度を上げ、最終的にゆっくりと終了する動作をします。他にも様々なイージングが存在し、それぞれ異なるアニメーションの振る舞いを提供します。
いくつかの他の一般的なイージング関数には、以下のようなものがあります：`ease-in`: アニメーションが始まるときにゆっくりと始まります。
`ease-out`: アニメーションが終了するときにゆっくりと終了します。
`linear`: アニメーションが一定の速度で進行します。急激な変化はありません。
`ease`: `ease-in-out`と同様に、アニメーションが始まるときにゆっくりと始まり、終了するときにゆっくりと終了しますが、`ease-in-out`よりも緩やかな変化を持ちます。
これらのイージング関数を選択することで、アニメーションの見た目や感触を微調整することができます。