HTMLにCSSボタン設置して呼び出しするぞ！

WordPressのLPボタン作成用の備忘録がてら。

意外とまとまった記事がなくて。

完成したアニメーションボタンはコチラ↓
（スマホからだとpushしないと確認できません）

テストボタン

某WPテーマの○ミングバードみたいなアニメーションが実装できます。

さあレッツチャレンジ

Hover.cssの設置から活用までの手順

最初にHover.cssをダウンロードして、ZIPファイルを解凍。

そこからCSSファイルのみを取り出し、FTPサーバーのテーマフォルダ直下などへアップロード。

このZIPファイルから取り出したCSSフォルダを・・

FTPサーバーのテーマフォルダに直接アップロード！

本サイトテーマと同じ「Affinger4」の場合は子テーマではなく、親テーマ直下にアップロードする必要があります。

手順１：Hover.cssをheadタグへ設置しよう！

Hover.cssのCSSファイルをFTPサーバーにアップロードしたら、次にCSSファイルをサイトに呼び込むためにhead.phpに以下テキストを追記。

<link href="<?php echo get_template_directory_uri() ?>/css/hover-min.css" rel="stylesheet" media="all">
<! Font Awesomeを利用したい場合は以下テキストを挿入>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">

これでHover.cssのアニメーションを自分のサイトに呼ぶこむ準備が出来ました。

Affinger4のheadタグへ※サーチコンソールを登録したい時は、上記の場所へ「サーチコンソールのHTMLタグ」を挿入することで反映できます。

次にCSSボタン（アニメーションさせたい箱）をstyle.cssに書いておきます。

手順２：style.cssにcssボタンの構文を書き込む

HTMLとstyle.cssに、ボタンを実装の構文を書き込みます。

CSSボタン１

Hover.cssさんのサイトからそのまま引用したやつ↓

<a href="#" class="button">Checkout</a>

.button { display: inline-block; padding: 1em; background-color: #79BD9A; text-decoration: none; color: white; }

CSSボタン２

シンプルに。simple

<a href="#" class="button">テストボタン</a>

.button {
background: none repeat scroll 0 0 #fff;
border: 1px solid #777;
border-radius: 3px;
color: #333;
cursor: pointer;
display: inline-block;
font-weight: bold;
line-height: normal;
margin-bottom: 20px;
padding: 6px 12px;
text-decoration: none;
}

テキストだけでもアニメーション化出来る。

CSSボタンをstyle.cssに設定しなくても、テキストだけのアニメーション化も可能です。

ただ個人的には「成約」を謳うなら「ボタン化」したほうが押しやすいから、ペルソナに優しいんじゃないかな〜と。

それに見た目カッコいいから自分のサイトに愛着もてるし。

これかなり大事。

次ページで実際にCSSボタンをアニメーション化していきます！