(cache) 【CSS】急がば急いで回れ、さんのSNSボタンの着替えを作りました

今回紹介するのはgeorge-gogo(急がば急いでまわれ！)さんが紹介されているSNSボタンの着せ替えCSSです。

はじめに

メインブログのえむしとえむふじんがあらわれたは、妻のえむふじんがカラーで絵を描いて、それがメインコンテンツになっています。

ですので、それを邪魔しないように、ブログはなるべくモノトーンかつシンプルで主張の少ないデザインで行こうと言う方針でやっています。

もともとSNSのフォローはgeorge-gogoさんのこちらを使わせていただいていましたが、カラーの部分を抑えたいと思い、CSSをリデザインしました。

georges.hatenablog.jp

単にカラーな部分を抑えるだけでは面白くないので、ボタンのアニメーションもフォーカスする感じに変えてみました。

htmlは急がば急いでまわれ！のところで使われているのをそのままに、見た目だけ変えてしまおうと言う、ズボラなカスタマイズです。

実物

実物です。こちらのボタンの素晴らしいところは、Flexboxと言うのを使って設計してある点です。（設計されたのはgeroge-gogoさんです。）項目を増やしたり減らしたりしても、横幅が変わらないんですよ。

例えば二つに減らしても

この通り。

ちなみに、Flexboxの存在を知るきっかけになったのも急がば急いでまわれ！のSNSボタンからです。
それで下記のヨメレバカエレバを作るキッカケになりました。

mshitech.hatenablog.com

色々と勉強になって楽しく制作出来ました。

脱線しましたが見た目の説明を。初期状態ではグレーにアイコンと文字だけの非常にシンプルなデザインです。そこからカーソルを重ねるとフォーカスするイメージでアニメーションさせてみました。

設置方法

georges.hatenablog.jp

をよく読んで、htmlを設置してください。リンクの貼り方など、分かりやすく書いてあるのですぐわかると思いますよ。

そして、CSSの部分だけ当サイトの物を貼り付けてください。

以下、CSSのコードです。

CSS

/ george-gogoさんのフォローボタン着せ替え /
.follow-btn{
 width: 100%;
 margin: 5px 0px 5px 0px;
}
.follow-btn ul {
 list-style: none;
 display: -webkit-flex;
 display: flex;
 margin: 0;
 padding: 0;
}
.follow-btn li {
 height:100px;
 width: 100%;
 -webkit-transition: width 0.3s ease-out;
 transition: width 0.3s ease-out;
 display: -webkit-flex;
 display: flex;
 -webkit-align-items: center;
 align-items: center;
 -webkit-justify-content: center;
 justify-content: center;
 transition: all 0.6s ease;
}
.follow-btn li span{
 line-height:2.5;
 font-size:180%;
 font-weight: normal;
 font-style: normal;
 font-weight: normal;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}
.follow-btn li:hover {
  transform: scale(0.9); / 変化するボタンの大きさ /
}
/ hatena /
.btn1 a, .btn2 a, .btn3 a, .btn4 a{
 color: #5d5d5d;
 background-color:#f8f8f8;
 transition: all 0.6s ease;
}
/ hatena /
.btn1 a:hover {
 color: #fff;
 border: solid 1px #5d5d5d; / ボーダー色 /
 background-color: #5d5d5d; / カーソルを重ねた時の背景色 /
}
/ twitter /
.btn2 a:hover {
 color: #fff;
 border: solid 1px #6FB6C3; / ボーダー色 /
 background-color: #6FB6C3; / 背景色 /
}
/ feedly /
.btn3 a:hover {
 color: #fff;
 border: solid 1px #82C36F; / ボーダー色 /
 background-color: #82C36F; / 背景色 /
}
/ facebook /
.btn4 a:hover {
 color: #fff;
 border: solid 1px #6998b9; / ボーダー色 /
 background-color: #6998b9;/Facebookの背景色/
}
.btn1-icon:before{
 content: "\f000";/はてなアイコン/
 display: inline-block;
 font-family: blogicon;
}
.btn2-icon:before{
 content: "\f035";/Twitterアイコン/
 display: inline-block;
 font-family: blogicon;
}
.btn3-icon:before{
 content: "\f04e";/Feedlyアイコン/
 display: inline-block;
 font-family: blogicon;
}
.btn4-icon:before{
 content: "\f036";/Facebookアイコン/
 display: inline-block;
 font-family: blogicon;
}
.follow-btn a {
 width:100%;
 height:100%;
 font-size: 13px;
 line-height: 1;
 font-weight: normal;
 text-decoration: none;
 text-align: center;
}