• RSS

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

  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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



  • このエントリーをはてなブックマークに追加
  • follow us in feedly

コメント

コメントを残す