続きを読むボタンのデザイン

はてなブログの続きを読むボタン通常だとすごく地味ですよね。

CSSのコードが書けるなら自分で好きなデザインを作れますけど、そこまで詳しくない、手早くデザインを替えたいという方のために、CSSデザインにコピペ一発で使えるコードをまとめた記事を紹介します。

僕も使ってるデザイン

georges.hatenablog.jp

僕はこの記事の続きを読むボタンのコードをいただきました。

他にもこれいるんか？みたいな面白い動きをするボタンもあるので、是非プレビューとにらめっこしながら数値変えて試してみてください。

僕は以下のコードを使っています。

/*続きボタン*/
.entry-content .entry-see-more {
padding:0;
width: 146px;
height: 46px;
line-height: 46px;
color: #FFF;/*文字色*/
background-color:rgb(70,70,110);/*背景色*/
font-size: 18px;
font-weight: 500;
text-align: center;
display: inline-block;
text-decoration: none;
-webkit-border-radius: 15px;/*角のまるさ調整*/
border-radius: 15px; /*角のまるさ調整*/
border: solid 2px rgb(70,70,110);/*押す前の線の色（同色の枠線があります）*/
-webkit-transition: all .3s;
transition: all .3s;
}

.entry-content .entry-see-more:hover {
color: #9EB8F3;/*押した後の文字色*/
background-color: transparent;
border: solid 2px;
border-color: #9EB8F3;/*線の色*/
}

 シンプルでおしゃれなデザイン

www.ituore.com

紹介されているデザインはモノクロですが、色はコードのcolorとかbackgrouondをイジれば変えられます。形や動きがシンプルのものが多いので、どんなタイプのブログデザインにも使えると思います。