[CSS]縦型、横型の吹き出し付きソーシャルボタンのCSS サンプル

CSSスニペット
スポンサーリンク

過去に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ボタンなどのサイズに合わせ作っている訳ではありませんので、お好みでフォントや余白、高さ、幅値などを調整いただければ幸いです。

コメント

タイトルとURLをコピーしました