今回紹介するのはgeorge-gogo(急がば 急いでまわれ！)さんが紹介されているSNSボタンの着せ替えCSSです。
はじめに
メインブログのえむしとえむふじんがあらわれたは、妻のえむふじんがカラーで絵を描いて、それがメインコンテンツになっています。
ですので、それを邪魔しないように、ブログはなるべくモノトーンかつシンプルで主張の少ないデザインで行こうと言う方針でやっています。
もともとSNSのフォローはgeorge-gogoさんのこちらを使わせていただいていましたが、カラーの部分を抑えたいと思い、CSSをリデザインしました。
単にカラーな部分を抑えるだけでは面白くないので、ボタンのアニメーションもフォーカスする感じに変えてみました。
htmlは急がば 急いでまわれ！のところで使われているのをそのままに、見た目だけ変えてしまおうと言う、ズボラなカスタマイズです。
デザイン案1
デモです。こちらのボタンの素晴らしいところは、Flexboxと言うのを使って設計してある点です。（設計されたのはgeroge-gogoさんです。）項目を増やしたり減らしたりしても、横幅が変わらないんですよ。
オリジナルと違うのは色の違いと、マウスオーバーしたときに下に沈み込むような挙動にした部分。
ちなみに、Flexboxの存在を知るきっかけになったのも急がば 急いでまわれ！のSNSボタンからです。
それで下記のヨメレバカエレバを作るキッカケになりました。
色々と勉強になって楽しく制作出来ました。
脱線しましたが見た目の説明を。初期状態ではグレーにアイコンと文字だけの非常にシンプルなデザインです。そこからカーソルを重ねるとフォーカスするイメージでアニメーションさせてみました。
設置方法
をよく読んで、htmlを設置してください。リンクの貼り方など、分かりやすく書いてあるのですぐわかると思いますよ。
そして、CSSの部分だけ当サイトの物を貼り付けてください。
以下、CSSのコードです。
デザイン案1CSS
/* 急がばさんフォローボタン着せ替え */
.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;
}
/* form */
.btn5 a:hover {
color: #fff;
border: solid 1px #b96969; /* ボーダー色 */
background-color: #b96969; /* Fromの背景色 */
}
.btn5-icon:before{
content: "\f04b"; /* Formアイコン */
display: inline-block;
font-family: blogicon;
}
以上です。
<li class="btn5"> <a href="googleformのurl" target="_blank"><span class="btn5-icon"><br /></span>Google Form</a></li>
こちら、george-gogo(急がば 急いでまわれ！)さんが作られていないGoogleFormのボタンです。
「googleformのurl」のところは各々URLに置き換えてください。
デザイン案2 2017年6月11日追加
こちら、マウスオーバーすると横に広がると言う挙動はオリジナルと一緒。
違いは元々のアイコンにSNSカラーのアンダーバーをいれて、マウスオーバーするとSNSのカラーがすっと浮きあがるようになっています。
デザイン案2CSS
/* 急がばさんフォローボタン着せ替え */
.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:80px;
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.0;
font-size:180%;
font-weight: normal;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.follow-btn li:hover {
width: 200%; /* 変化するボタンの大きさ */
}
/* btn */
.btn1 a, .btn2 a, .btn3 a, .btn4 a, .btn5 a {
color: #5d5d5d;
background-color:#f8f8f8;
transition: all 0.6s ease;
}
/* hatena */
.btn1 a {
border-bottom: solid 6px #5d5d5d; /* ボーダー色 */
}
.btn1 a:hover {
color: #fff;
background-color: #5d5d5d; /* カーソルを重ねた時の背景色 */
}
/* twitter */
.btn2 a {
border-bottom: solid 6px #6FB6C3; /* ボーダー色 */
}
.btn2 a:hover {
color: #fff;
background-color: #6FB6C3; /* 背景色 */
}
/* feedly */
.btn3 a {
border-bottom: solid 6px #82C36F; /* ボーダー色 */
}
.btn3 a:hover {
color: #fff;
background-color: #82C36F; /* 背景色 */
}
/* facebook */
.btn4 a {
border-bottom: solid 6px #6998b9; /* ボーダー色 */
}
.btn4 a:hover {
color: #fff;
background-color: #6998b9; /* Facebookの背景色 */
}
/* googleform */
.btn5 a {
border-bottom: solid 6px #b96969; /* ボーダー色 */
}
.btn5 a:hover {
color: #fff;
border-bottom: solid 6px #b96969; /* ボーダー色 */
background-color: #b96969; /* Fromの背景色 */
}
.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;
}
.btn5-icon:before{
content: "\f04b"; /* Formアイコン */
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;
}
サンプル
最後に
あれこれと試行錯誤している間はは楽しいですね。
ではでは、また次の記事で・・・
george-gogoさんもオススメのCSS解説本。
