文系未経験プログラマ

忘れてもいいように書く

aタグをボタンっぽくする方法

【前提知識】a:hoverでaタグの領域にマウスがフォーカスされた時の体裁を指定できる


【本題】# リンクをボタンのように見せる方法display: blockにする -> paddingを設けることでコンテンツ領域以外もリンクとすることが可能更にhover時の背景色を変更することでクリッカブルであることをユーザーに知らせるa { display: block; padding: 20px 0;}

a:hover { background-color: #ffa320;}


【感想】background-colorの有効活用

 

【参考】