• 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

コメント

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください