ホーム » 個人掲示板 » ■SNSボタンのstyle.css
My Google+

■SNSボタンのstyle.css

  • 技術三昧@2018-11-29 18:32:11

スポンサーリンク

■SNSボタンのstyle.css


/*ベース
/************************************************************/
#sns-wrap {
	width:100%;
	box-sizing:border-box;
	font-family: "Lato", "游ゴシック体", "Yu Gothic", "YuGothic", "ヒラギノ角ゴシック Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo, Osaka", "MS Pゴシック", "MS PGothic", "sans-serif";
	color:#191919;
	margin: 0;
	padding: 0;
}
.ShareList *, .ShareList *:before {box-sizing:inherit;}

/*-----------------------------shareボタン(SNS)style*/
/* SNSボタン一覧*/
.ShareList {
	list-style:none;
	display: flex;
    justify-content: flex-end;
	flex-wrap:wrap;
	width:100%;
	margin:0;
	padding:0;
	line-height:1;
}
/* SNSボタン */
.ShareList__item {
    flex-grow: 1;
	height:40px;
	line-height:40px;
	min-width:100px;
	text-align:center;
}
/* SNSボタンa-link  */
.ShareList__link {
	display:block;
	color:#ffffff;
	text-decoration: none;
}
.ShareList__link::before{
	font-size:32px;
	display:block;
	transition: ease-in-out .3s;
}
.ShareList__link:hover::before{
	background: #fff;
	transform: scale(1.1);
	box-shadow:3px 3px 4px 0px rgba(0,0,255,0.15);
	
}

/* SNSボタンStyle  */
.ShareList__icon-twitter{background:#55acee;}
.ShareList__icon-twitter:hover::before{color:#55acee;}

.ShareList__icon-facebook{background:#3B5998;}
.ShareList__icon-facebook:hover::before{color:#3B5998;}

.ShareList__icon-google-plus{background:#dd4b39;}
.ShareList__icon-google-plus:hover::before{color:#dd4b39;}

.ShareList__icon-hatebu{background:#008FDE;}
.ShareList__icon-hatebu:hover::before{color:#008FDE;}

.ShareList__icon-pocket{background:#EB4654;}
.ShareList__icon-pocket:hover::before{color:#EB4654;}

.ShareList__icon-rss{background:#ff9900;}
.ShareList__icon-rss:hover::before{color:#ff9900;}

.ShareList__icon-feedly{background:#6cc655;}
.ShareList__icon-feedly:hover::before{color:#6cc655;}

.ShareList__icon-pinterest{background:#cb2027;}
.ShareList__icon-pinterest:hover::before{color:#cb2027;}

.ShareList__icon-linkedin{background:#0e76a8;}
.ShareList__icon-linkedin:hover::before{color:#0e76a8;}

.ShareList__icon-line{background:#1dcd00;}
.ShareList__icon-line:hover::before{color:#1dcd00;}



0人

◎技術三昧掲示板で掲載した情報(リンク・リンク先を含む)に関して、掲示板管理者が確認や保証を行うことは一切ありません。
すべて利用者のモラルに委ねられおり、掲示板から張られたリンクに関するトラブルが生じても管理者側は免責とさせていただきます。

閉じる