【はてなブログカスタマイズ】オレンジボタン

こんにちは、オンライン心理カウンセラーの小川(@hamidasiblog)です。

このたびサイトデザインを一新しました。

その際に行ったカスタマイズを備忘録として記録します。

html

<div class="button">
<div class="button-inner"><a href="“URL”">タイトル</a></div>
</div>

css

/* button */
.button {
width: 300px;
height: 46px;
margin-top: 0;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.button-inner a {
position: relative;
display: table-cell;
width: 300px;
height: 46px;
border-radius: 4px;
background-color: #FF9A00;
font-size: 20px;
font-weight: bold;
color: #fff;
text-align: center;
vertical-align: middle;
box-shadow: 0 2px 4px rgba(0,0,0,.4);
text-decoration: none;
transition: all .6s;
}
.button-inner a:hover {
top: 3px;
box-shadow: none;
transition: all .6s;
}

コメントを残す

メールアドレスが公開されることはありません。

ABOUTこの記事をかいた人

うつで2度の休職を経験後、3年ほどは就労できていたが、追突事故にあい、うつが再発、再度休職し、首には後遺障害が残存したが保険金は弁護士基準でゲットした♪ ブログでは「精神障がい者が人生を豊かにするブログ」をテーマに精神疾患に関する情報を発信。無料オンラインサロン主催