■SNSボタンのstyle.css_個人掲示板_zanmai.net

■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 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;}

閉じる