「続きを読む」のボタンのデザインを変えました

ちょっとしたことですが、「続きを読む」のボタンのデザインを変えました。

前はこんな風でしたよね。

単調なデザインの「続きを読む」のボタン

新しいのはこれです。

立体的なデザインの「続きを読む」のボタン

ちょっとおしゃれでしょう?ふっくらした立体的な感じになっていると思います。

どうやったかというと、CSSのbackgroundに「linear-gradient」というのを使ったのです。ある色から別の色へ次第に遷移する様にしたわけです。一番濃い色は、前と同じで、100%として指定して、一番薄い色を0%で指定しました。

薄い色のコードの取得ですが、これには、ホームページ・ビルダーの「ウェブアート・デザイナー」のカラーパレットを利用しました。色の設定の画面の16進法で色を指定するところで、一番濃い色のコードを入力して、それからスライドを上の方にずらしていきます。適当なところで、止めて、コードを取得します。

色の設定の画面で一番濃い色を設定する方法
カラーパレットから色の設定に入り、一番濃い色のコードを入力します。

色の設定の画面で薄い色のコードを取得する方法
◀のスライドを上にずらして、薄い色のコードを取得し、これを一番薄い色として設定します。

CSSは下記のようになります。

background:linear-gradient(#85aecf 0%,#4682b4 100%) ;

もちろんこれだけではボタンはできませんが、ふっくらさせるためのコードはこれです。

これは簡単でしたが、問題は、文字を真ん中に配置することでした。

左右の真ん中に配置するには、text-alignでいいのですが、上下の真ん中がやっかいです。

なぜかと言うと、ボタンはブロック要素にしていあるので、vertical-alignが使ないからです。そこで、heightとline-heightに同じ値を入れると言う方法にしました。これで一見うまく行ったかのように見えましたが、よく見たら、ちょっと上にずれていました。そこで、line-heightをちょっと上乗せしてやったところ、だいたいうまく真ん中になりました。

単位は、emとして、heightを2em、line-heightを2.1emとしてあります。

これにて一件落着です。

CSSを見ればわかることですが、該当部分を書き出しておきますね。

a.read-more {
	color:#000000 !important;
	background:linear-gradient(#85aecf 0%,#4682b4 100%);
	font-weight:bold;
	border-radius:15px;
	display:block;
	width:120px;
	text-align:center;
	margin-top:20px;
	height:2em;
	line-height:2.1em;
}

a:hover.read-more {
	color:#fff !important;
	text-decoration:none;
}

じゃあ、またね。