過去にCSSで作る「吹き出し」のサンプルの記事で紹介させていただいたカスタマイズを元に、
FacebookやTwitterっぽい吹き出し付のソーシャルボタンを「縦型」「横型」で作ってみました。
吹き出し付の縦型ボタン(vertical)
縦型ボタンのサンプルはこちらです。このボタンを実現するためのコードですが、まずはCSSからご紹介。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | /*いいねボタン*/ .like { display : block ; vertical-align : middle } .like a.btn { color : #777 ; font-size : 90% ; line-height : 2em ; padding : 5px 10px ; text-decoration : none ; border : 1px solid #ccc ; border-radius : 4px ; background :-webkit-gradient( linear , left top , left bottom , from( #fff ), to( #eee )); background-color : #eee ; } .like a.btn:focus, .like a.btn:hover { opacity : 0.75 } /*吹き出し*/ .balloon { display : block ; vertical-align : middle ; margin-bottom : 5px ; } .balloon span.number { color : #777 ; font-size : 90% ; line-height : 2em ; padding : 5px 12px ; position : relative ; background : #fff ; border : 1px solid #ccc ; border-radius : 4px ; } .balloon span.number:after, .balloon span.number:before { left : 50% ; top : 100% ; border : solid transparent ; content : "" ; position : absolute ; } .balloon span.number:after { border-top-color : #fff ; border-width : 4px ; margin-left : -4px } .balloon span.number:before { border-top-color : #ccc ; border-width : 5px ; margin-left : -5px ; } |
続いて、ボタンを表示したい場所に以下のように記述します。
1 2 3 4 5 6 | < div class = "balloon" > < span class = "number" >10.5k</ span > </ div > < div class = "like" > < a href = "" class = "btn" >いいね</ a > </ div > |
吹き出し付の横型ボタン(horizontal)
横型ボタンのサンプルはこちらです。こちらの横型タイプのCSSの記述例はこんな感じです。
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 | /*いいねボタン*/ .like { display : inline-block ; vertical-align : middle } .like a.btn { color : #777 ; font-size : 90% ; line-height : 2em ; padding : 5px 10px ; text-decoration : none ; border : 1px solid #ccc ; border-radius : 4px ; background :-webkit-gradient( linear , left top , left bottom , from( #fff ), to( #eee )); background-color : #eee ; } .like a.btn:focus, .like a.btn:hover { opacity : 0.75 } /*吹き出し*/ .balloon { display : inline-block ; vertical-align : middle ; margin-left : 5px ; } .balloon span.number { color : #777 ; font-size : 90% ; line-height : 2em ; padding : 5px 10px ; position : relative ; background : #fff ; border : 1px solid #ccc ; border-radius : 4px ; } .balloon span.number:after, .balloon span.number:before { right : 100% ; top : 50% ; border : solid transparent ; content : "" ; position : absolute ; } .balloon span.number:after { border-right-color : #fff ; border-width : 4px ; margin-top : -4px } .balloon span.number:before { border-right-color : #ccc ; border-width : 5px ; margin-top : -5px ; } |
ボタンを表示したい場所に、以下のように記述します。
1 2 3 4 5 6 | < div class = "like" > < a href = "" class = "btn" >いいね</ a > </ div > < div class = "balloon" > < span class = "number" >10.5k</ span > </ div > |
今回のサンプルボタンは、TwitterやFacebookのLikeボタンなどのサイズに合わせ作っている訳ではありませんので、お好みでフォントや余白、高さ、幅値などを調整いただければ幸いです。
コメント