ボタンのカスタマイズ

サンプル: ボタンの使用と、aタグをボタンぽく見せる | jsFiddle

ひとまず、ボタンそのものを使う方法とaタグをボタンぽく見せるという方法があります。どちらも同じようなものですが意味合い的にはボタンを使う方が良いかと思います。
ボタンの場合、aタグにはスタイルする必要はなく、逆に不要なものを取り除く必要があるかも知れません。

もしAMPを利用されている場合は、それ用にcssを別で書く必要があるかも知れませんが、基本はこんな感じです。

またスマホではhoverが無いので、マウスオーバーでのアニメーション効果は基本PC向けです。

できました！

ホント、今回も至れり尽くせりのアドバイスをありがとうございます。
fontAwesomeのフォントも仕込めるのですね。
見よう見まねでインターナルリンク用にもう一つ作りました。
これでだいぶ効率が良くなると思います♪

AMPは利用していません。
というかやったほうが良くても知識がないし、勉強している余裕もないと言ったところが本音です。
将来AMPを利用する際は、また質問させていただかないといけませんね。。。

> またスマホではhoverが無いので、マウスオーバーでのアニメーション効果は基本PC向けです。

マウスオーバーという行為自体がないですものね（^-^；
でも見た目は変わりましたし、タッチの仕方が不十分だとアニメーションになったりと面白いので良しとします♪
（iOS 10.1.1のiPhone・iPadのSafariとCromeで確認）

ありがとうございました!!

ただ1点追記しておくと、buttonというのは本来フォームパーツです。
今回は、あくまでbuttonの一部機能を使いながらやってることはaタグでリンクですから特別buttonタグにこだわる必要もありません。

フォーム以外でbuttonを使う場合はjQueryなどで本来のボタンとして使うぐらいが使いみちです。この場合aタグは必要なく、buttonにdata属性を埋め込んだりして、その内容から判断してjQuery等で画面遷移を行います。

またボタン自体は画像でも何でもよく、リンク自体はスタイルを持っている必要もありませんから、

サンプル: ボタンの使用と、aタグをボタンぽく見せる -1つ追加- | jsFiddle

ということもできます。

なるほどです。
フォームパーツだから
-webkit-appearance: none;
-moz-appearance: none;
と、リセットしてやる必要があるのですね。
buttonがフォームパーツであることすら知りませんでした(^-^；

教えて頂いた内容を理解するのに3検索ほど必要でしたが、
なんとか理解できたと思います。

CSS、面白いですね♪
教えて頂いたtest2も含めてコピペして、
Tiops箱に納めさせていただきますm(_ _)m

buttonはほぼinputと同じ感じで使えるのですが、

<input type="submit">送信</input>
<button type="submit">送信</button>

※ type=”submit”は初期値。ただのボタンにする場合は、type=”button”とします

buttonにはdisabled属性というのがあってボタンを押せないようにしたり、よりボタンとしての本来の機能を使えるようになってます。inputは、まぁボタンに変わりないんですが、汎用ボタンという感じです。

まぁ別に使わなくても同じようなことはできるんですけどね(笑)
仮に何かしら問題があってcssが機能しない状態になっても、それがボタンであるというふうに表示させることが本来の要素の意味となるので、なるべく上手く使いたい感じですね。

appearance: none;は

button{
        background-color: transparent;
        border: none;
        cursor: pointer;
        outline: none;
        padding: 0;
        appearance: none;
}

こんな感じにリセットできるそうです。

参考: button要素のcssをリセットしたい | Qiita