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

過去にCSSで作る「吹き出し」のサンプルの記事で紹介させていただいたカスタマイズを元に、
FacebookやTwitterっぽい吹き出し付のソーシャルボタンを「縦型」「横型」で作ってみました。

吹き出し付の縦型ボタン（vertical）

縦型ボタンのサンプルはこちらです。



このボタンを実現するためのコードですが、まずはCSSからご紹介。

/*いいねボタン*/
.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;
}

続いて、ボタンを表示したい場所に以下のように記述します。

<div class="balloon">
    <span class="number">10.5k</span>
</div>
<div class="like">
    <a href="" class="btn">いいね</a>
</div>

吹き出し付の横型ボタン（horizontal）

横型ボタンのサンプルはこちらです。



こちらの横型タイプのCSSの記述例はこんな感じです。

/*いいねボタン*/
.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;
}

ボタンを表示したい場所に、以下のように記述します。

<div class="like">    
    <a href="" class="btn">いいね</a>    
</div>
<div class="balloon">    
    <span class="number">10.5k</span>    
</div>

今回のサンプルボタンは、TwitterやFacebookのLikeボタンなどのサイズに合わせ作っている訳ではありませんので、お好みでフォントや余白、高さ、幅値などを調整いただければ幸いです。