【無料プレゼント】アフィリエイトサイトで使える無料ボタン素材集 ※HTMLとCSSのコード付き

※この記事は約 12 分で読めます。

みなさまこんにちは。Webデザイナー&ディレクターのよねこです。
このたび、Youtube動画の「アフィリエイト中学校」にウェブスターマーケティング株式会社代表のマッサーさんと出演させていただきました。

アフィリエイト中学校とは
初心者から上級者までアフィリエイトのノウハウを動画で学べる実践バラエティ番組です。月に100万円以上稼ぐアフィリエイターが素人に0からアフィリエイトを教えたり、視聴者の質問に答えたり、視聴者の皆様と共に学んでいくヤラセなしのリアルガチ番組として人気を集め、現在はチャンネル登録数は4000人を超えています。

今回はマーケティングのプロであるマッサーさんをメインとして、アフィリエイターさんがマーケティングとデザインをどう捉えて、利用していけばよいのか。Webデザインが苦手なアフィリエイターはどうやってデザインを作成すると良いのか、などのポイントをお話した回になります。3回に分けて公開されていますので、「なんだか気になるぞ。」という方はぜひご覧ください。

無料特典プレゼントのその内容とは!?

「アフィ中Season3 #11〜13 デザイン編(全3回)」の動画を最後まで見てくれた視聴者の方に無料特典プレゼントするぞ!と発表させていただいたのですが、その詳細についてご案内させていただきます。

本記事で紹介する特典は「アフィリエイトサイトで使える無料ボタン素材集」です。

「自分でボタン画像が作れないの!(泣)」
「作れるけど面倒くさいから、あるやつを使いたいよ!」
という方にオススメです。

サイト作成システムSIRIUS(シリウス)やWordPress等でご利用いただけます。

ボタン画像を動かすためのHTML&CSSコードも紹介!

今回は素材の提供だけでなく、ボタン画像を動かすためのHTML&CSSのサンプルコードも紹介しています!紹介しているコードを貼り付ければ、ボタンがよこにゆらゆら揺れたりプルプル動いたりします。ボタンにアクションを加えたい方はぜひ試してみてください。

また、ボタン画像がなくても、HTMLとCSSのコードを貼るだけでボタンを表現できる方法も紹介しています。CSSだけで表現できるボタンは表記修正や更新がラクなので、こちらもぜひ試してみてください。

さっそく特典プレゼントを紹介します!

少し前置きが長かったですが…

裏で色々とお話した結果、なんと今回「Webに無料公開しちゃおう!」という話になりました!

ただ、これはあくまで動画を見てくれた人限定のプレゼントということになっているのです!まだ今回の動画を見てない人は以下のリンクから見てくださいね〜!(^o^)

 

 

さぁ、みんな見たかな??

それでは、以下より紹介させていただきます〜!

ボタンの画像素材の詳細

シンプルボタン1:公式サイトはこちら

他のボタンカラーバリエーション

シンプルボタン2:公式サイトはこちら

他のボタンカラーバリエーション

シンプルボタン2(キラキラ):公式サイトはこちら

他のボタンカラーバリエーション

シンプルボタン3:詳細はこちら

他のボタンカラーバリエーション

ボタンの一括ダウンロードはこちら

ボタン画像をまとめてダウンロードしたい方はこちら↓よりどうぞ

紹介したボタン画像をCSSで動かしてみよう

最初に紹介したボタン素材をCSSを使って動かしてみます。HTMLとCSSのサンプルコードを掲載していますので、ご自身のサイトでぜひ利用してみてください。

ふわふわ動くボタン

公式サイトはこちら

htmlとCSSは以下のように記述します。

HTML

注意事項
ここに書いてあるHTMLはサンプルのコードとなります。ご利用の際はご自身のサーバーに画像をアップロードし、imgタグのURLをご自身のサーバーのURLに置き換えてご利用ください。

CSS

プルプル震えるボタン

公式サイトはこちら

htmlとCSSは以下のように記述します。

HTML

注意事項
ここに書いてあるHTMLはサンプルのコードとなります。ご利用の際はご自身のサーバーに画像をアップロードし、imgタグのURLをご自身のサーバーのURLに置き換えてご利用ください。

CSS

2つの画像を動かしてややインパクトのあるボタンを作ろう

ボタンとそのテキストやカーソル等を2枚の画像にわけて違う動きを加えています。 ボタン単体の画像をを動かすよりも、よりインパクトを与えることができます。 よかったらこちらも試してみてくださいね。

文字が飛び出る&ぷるぷると動くボタン

公式サイトはこちら

今回は2つの画像を利用しますので、以下の画像2枚を右クリックで「名前をつけて画像を保存」を押して保存してご利用ください。

利用している画像2枚はこちら

ボタンの色を変えたい場合はこちらの画像をどうぞ

※この画像は「ボタン画像一括ダウンロード」の中にも含まれています

htmlとCSSは以下のように記述します。

HTML

注意事項
ここに書いてあるHTMLはサンプルのコードとなります。ご利用の際はご自身のサーバーに画像をアップロードし、imgタグのURLをご自身のサーバーのURLに置き換えてご利用ください。

CSS

注意事項
CSS内のbackgroundに記載する画像のパスはご自身のサーバーのURLに置き換えてご利用ください。

左右に矢印が動く&ぷるぷると動くボタン

公式サイトはこちら 今回は以下の2つの画像を利用します。

利用している画像2枚はこちら

htmlとCSSは以下のように記述します。

HTML

注意事項
ここに書いてあるHTMLはサンプルのコードとなります。ご利用の際はご自身のサーバーに画像をアップロードし、imgタグのURLをご自身のサーバーのURLに置き換えてご利用ください。

CSS

応用例:キラキラボタン

公式サイトはこちら 応用例として、ボタンを「キラキラボタン」に置き換えたものです。ややインパクトがプラスされますね。美容系の商品を紹介する時などに良いかもしれません。

画像を使わずCSSだけで作るボタン

画像を使わずCSSだけで作るボタンのサンプルコードの紹介です。CSSだけでボタンを作るとボタンのテキスト修正など、管理が楽なのでオススメです。 ※CSSが苦手な人は画像ボタンの方をご利用くださいね。

キラッと光るボタン:赤

キラッと一瞬光るボタン(赤)です。 好きな文字でどうぞ

HTML

今回はwebフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

キラッと光るボタン:緑

キラッと一瞬光るボタン(緑)です。 好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

キラッと光るボタン:オレンジ

キラッと一瞬光るボタン(オレンジ)です。 好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

キラッと光るグラデーションボタン:赤

キラッと光るグラデーションボタン(赤)です。 「キラッと光るボタン1」とそこまで大差はないですがこちらはグラデーションを動かしているので表現がやや穏やかかもしれません。 フォントやカラーなども少し変えているのでお好みでご利用ください。
好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

キラッと光るグラデーションボタン:ピンク

キラッと光るグラデーションボタン(ピンク)です。 好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

キラッと光るグラデーションボタン:水色

キラッと光るグラデーションボタン(水色)です。 好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

矢印とボタンがそれぞれ別の動きをする:青

矢印とボタンがそれぞれ別の動きをする(青)です。CSSでグラデーションボタンを作成し、ボタンと矢印をそれぞれ揺らしています。
好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

矢印とボタンがそれぞれ別の動きをする:紫

矢印が左右にボタンが上下にゆれる(紫)です。
好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

矢印とボタンがそれぞれ別の動きをする:赤

矢印が左右にボタンが上下にゆれる(赤)です。
好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

矢印とボタンがそれぞれ別の動きをする:緑

矢印が左右にボタンが上下にゆれる(緑)です。
好きな文字でどうぞ

HTML

webフォントを利用していますので、HTMLの<head>内に以下を記載し、Webフォントを読み込みます。

ボタンのhtmlは以下の通りです。

CSS

さいごに

ボタンの紹介は以上になります。
みなさまのアフィリエイトサイト制作に役立てていただければ幸いです。 最後までお読みいただきありがとうございました!
何かありましたら@_yonecoまでご連絡いただければと思います。(もしリクエストなどある場合、言っていただければ追加するかもしれません)

それではみなさん良いアフィリエイトライフを!(^o^)

この記事が気に入ったら
いいね ! しよう

The following two tabs change content below.
よねこ

よねこ

渋谷でWebデザイナー&ディレクターとして活動中。 楽しいことが大好きです。 近場の人はランチ行きましょう。

ABOUTこの記事をかいた人

よねこ

渋谷でWebデザイナー&ディレクターとして活動中。
楽しいことが大好きです。
近場の人はランチ行きましょう。