CSSだけで作った矢印(→)をボタンエリア内に表示させ、マウスオーバーするとtransformでボタンエリアの色を反転させる方法をご紹介します。
CSSをコピペするだけでOKなので簡単に流用できます。試してみて下さい。
Contents
CSSだけで作る矢印を組み合わせたボタンエリアの記述
※ボタンエリア(a.btn)のCSS記述です。矢印(→)やマウスオーバー時にtransformでボタンエリアの色を反転させてます。ボタンエリア、フォントサイズ、色等を必要に応じて変更して下さい。
<style> body{ text-align: center; font-size: 28px; line-height: 1.8em; font-weight: bold; } h1{ line-height:1.6em; text-align:center; font-weight:normal; padding:15px 0 30px 0; font-size: 16px; } /*** 以下、ボタンエリアのCSS ***/ a.btn{ display: block; width: 200px; height: 60px; margin: 0 auto; color: #000000; border: solid 2px #000000; box-sizing: border-box; line-height: 58px; text-align: center; font-size: 20px; font-weight: bold; text-decoration: none; position: relative; -webkit-transition: 0.3s; transition: 0.3s; } a.btn::before, a.btn::after{ position: absolute; top: 0; bottom: 0; margin: auto; content: ""; vertical-align: middle; -webkit-transition: 0.3s; transition: 0.3s; } a.btn::before{ right: 19px; width: 19px; height: 1px; background: #000000; } a.btn::after{ right: 20px; width: 16px; height: 16px; border-top: 1px solid #000000; border-right: 1px solid #000000; -webkit-transform: rotate(45deg); transform: rotate(45deg); } a.btn:hover{ background-color: #000000; color: #ffffff; } a.btn:hover::before{ background: #ffffff; } a.btn:hover::after{ border-top: 1px solid #ffffff; border-right: 1px solid #ffffff; } </style>
CSSだけで作る矢印を組み合わせたボタンエリアを作るHTMLの記述
※aタグにclass=”btn”を追記するだけです。必要に応じて変更して下さい。
<h1>CSSで作った矢印(→)をボタンエリア内に表示させてます。<br>マウスオーバーするとtransformで色を反転させます。</h1> <a class="btn" href="./">ボタン</a>
CSSで作った矢印(→)をボタンエリア内に表示させ、マウスオーバーするとtransformで色を反転させるデモページ
CSSで作った矢印(→)をボタンエリア内に表示させ、マウスオーバーするとtransformで色を反転させるデモページ
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。
ディスプレイ広告