各SNS(Instagram・Facebook・Twitter・LINE)のアイコンは使う機会が多いと思うので、テンプレ化。
- アイコンの色が変わる
- アイコンの色が変わる(背景を白抜き)
- 正方形で白抜き
- 円で白抜き
- アイコンの背景色が変わる
- 背景が正方形
- 背景が円
他のSNSアイコンなどにも使い回せるはず。
ただし、アイコンの形(四角い or 円形 or 他)と背景の形(正方形 or 円)の組み合わせによっては微妙にダサくなる場合もあるので注意。
Instagramアイコンの背景色(グラデーションのCSS)は以下のサイトより。
文具女子博｜すべての文具好きに贈る日本最大級の文具の祭典
目次
ソースコード
アイコンの色が変わる
CSS
/*
アイコンの色が変わる
*/
.pattern-01 .icon-wrap {
display: block;
color: black;
}
.pattern-01 .icon-wrap:hover.icon-wrap-facebook {
color: #1877f2;
}
.pattern-01 .icon-wrap:hover.icon-wrap-twitter {
color: #1da1f2;
}
.pattern-01 .icon-wrap:hover.icon-wrap-line {
color: #00B900;
}
アイコンの色が変わる(背景を白抜き)
CSS
/*
アイコンの色が変わる(背景を白抜き)
*/
.pattern-02 .icon-wrap {
display: block;
color: black;
}
.pattern-02 .icon-wrap.icon-wrap-facebook,
.pattern-02 .icon-wrap.icon-wrap-twitter {
/* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */
padding: 7px;
}
.pattern-02 .icon-wrap.icon-wrap-line {
/* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */
padding: 7px 10px;
}
.pattern-02 .icon-wrap:hover {
background-color: white;
}
.pattern-02.square .icon-wrap:hover {
border-radius: 25%; /* 正方形 */
}
.pattern-02.circle .icon-wrap:hover {
border-radius: 50%; /* 円 */
}
.pattern-02 .icon-wrap:hover.icon-wrap-facebook {
color: #1877f2;
}
.pattern-02 .icon-wrap:hover.icon-wrap-twitter {
color: #1da1f2;
}
.pattern-02 .icon-wrap:hover.icon-wrap-line {
color: #00B900;
}
アイコンの背景色が変わる
CSS
/*
アイコンの背景色が変わる
*/
.pattern-03 .icon-wrap {
display: block;
color: black;
}
.pattern-03 .icon-wrap.icon-wrap-instagram {
/* Instagramのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */
padding: 7px 9.125px;
}
.pattern-03 .icon-wrap.icon-wrap-facebook,
.pattern-03 .icon-wrap.icon-wrap-twitter {
/* facebookとTwitterのアイコンは正方形なので、上下左右のpaddingの値は同じ */
padding: 7px;
}
.pattern-03 .icon-wrap.icon-wrap-line {
/* LINEのアイコンは縦に長い(= 正方形ではない)ので左右のpaddingを少し多めにとる */
padding: 7px 10px;
}
.pattern-03 .icon-wrap:hover {
color: white;
}
.pattern-03.square .icon-wrap:hover {
border-radius: 25%; /* 正方形 */
}
.pattern-03.circle .icon-wrap:hover {
border-radius: 50%; /* 円 */
}
.pattern-03 .icon-wrap:hover.icon-wrap-instagram {
/* 【参考】 https://bungujoshi.com/ */
background: -webkit-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -webkit-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
background: -moz-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -moz-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
background: -ms-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -ms-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
background: -o-radial-gradient(32% 106%, circle cover, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), -o-linear-gradient(-45deg, #234bd7 12%, #c33cbe 58%);
background: radial-gradient(circle farthest-corner at 32% 106%, #ffe17d 0%, #ffcd69 10%, #fa9137 28%, #eb4141 42%, transparent 82%), linear-gradient(135deg, #234bd7 12%, #c33cbe 58%);
}
.pattern-03 .icon-wrap:hover.icon-wrap-facebook {
background-color: #1877f2;
}
.pattern-03 .icon-wrap:hover.icon-wrap-twitter {
background-color: #1da1f2;
}
.pattern-03 .icon-wrap:hover.icon-wrap-line {
background-color: #00B900;
}