シン・マコ
2022.02.10 (更新日:2022.06.06)

【css】SNS用フォローボタン2種類の解説です。

 
 
シンプルに力強く。

数多くあるSNSボタン。
今回は私の厳選SNSボタンを紹介します。
カラーボタンはマウスを重ねると色が反転します。
モノクロボタンは平面的でシンプルなデザインです。
二つともとても気に入ってます。

丸いカラーのSNSボタンとシンプルなピクトグラム風のSNSボタンデザインの紹介です。

固定ページプロフィール用の丸カラーボタンから紹介します。

私はフォローボタンとして使用してます。

headerの間に下記コードを記載してください。

httpsのコードなので外部読み込みです。


<script src="https://kit.fontawesome.com/b1e81adc1e.js" crossorigin="anonymous"></script>

本文(content)に下記コードを記載。

記事本文ですよ。



<ul class="snsbtniti">

        <li><a href="https://twitter.com/sinjotigers" class="flowbtn4 fl_tw2">
                  <i class="fab fa-twitter"></i><div>Twitter</div></a></li>

        <li><a href="https://www.instagram.com/sinjotigers/" class="flowbtn4 insta_btn2">
                  <i class="fab fa-instagram"></i><div>Instagram</div></a></li>

        <li><a href="https://www.youtube.com/user/sinjonrp/featured" class="flowbtn4 fl_yu2">
                  <i class="fab fa-youtube"></i><div>YouTube</div></a></li>

</ul>

cssに下記コードを記載。

外観→テーマファイルエディタ→スタイルシートのstyle.cssに記載します。


/* ボタン全体の装飾 */
.flowbtn4{
font-family:'Trebuchet MS',sans-serif;/* 好きなフォントに変えてね */
border-radius:50%;
display:inline-block;
width:70px;
height:70px;
font-size:30px;
transition:.5s;
text-decoration:none;
}
/* ボタンマウスホバー時テキストカラー */
.flowbtn4:hover{
color:#fff!important;
}
/* Twitter */
.flowbtn4.fl_tw2{
border:solid 1px #55acee;
color:#55acee;
}
/* Twitterマウスホバー時 */
.flowbtn4.fl_tw2:hover{
border:solid 1px #55acee;
background:#55acee;
}
/* Instagram */
.flowbtn4.insta_btn2 {
border:solid 1px #c6529a;
color:#c6529a;
}
/* Instagramマウスホバー時 */
.flowbtn4.insta_btn2:hover{
border:solid 1px #c6529a;
background:#c6529a;
}

/* YouTube */
.flowbtn4.fl_yu2{
border:solid 1px #fc0d1c;
color:#fc0d1c;
}
/* YouTubeマウスホバー時 */
.flowbtn4.fl_yu2:hover{
border:solid 1px #fc0d1c;
background:#fc0d1c;
}
/* ボタン内テキスト調整 */
.flowbtn4 div{
font-size:11px;	
font-weight:bold;
position:relative;
bottom:0px;		
}
.fab{
	margin-top:10px;
}
/* ボタンの位置 */
.snsbtniti{
display:flex;
flex-flow:row wrap;
justify-content:flex-end;
padding-right:50px;
}
/* ボタン同士の余白 */
.snsbtniti li{
	text-align:center;
	letter-spacing:0em;
	padding-right:10px;
  list-style-type:none;
}
@media screen and (max-width:568px){
	.snsbtniti{
	padding-right:10px;
}
.flowbtn4{
	width:60px;
	height:60px;
}
.flowbtn4 div{
	display:none;
}
.fab{
	margin-top:15px;
}
}

codepen用です。

sinjotigersは私のアカウントです。

See the Pen
Untitled
by マージン (@sinjotigers)
on CodePen.

続いてfooterで使用しているSNSボタン。平面的なデザインです。

これもフォロー用として使用してます。

headerの間に下記コードを記載してください。

httpsのコードなので外部読み込みです。



<script src="https://kit.fontawesome.com/b1e81adc1e.js" crossorigin="anonymous"></script>

本文(content)に下記コードを記載。

記事本文ですよ。



<footer id="footer">
    <div class="navi-row">
      <ul class="sns-navi">
        <li><a href="https://twitter.com/sinjotigers">
            <i class="fab fa-twitter"></i></a></li>
        <li><a href="https://www.youtube.com/user/sinjonrp/featured">
            <i class="fab fa-youtube"></i></a></li>
        <li><a href="https://www.instagram.com/sinjotigers/">
            <i class="fab fa-instagram"></i></a></li>
      </ul>
    </div>
</footer>	

cssに下記コードを記載。

外観→テーマファイルエディタ→スタイルシートのstyle.cssに記載します。


#footer {
  position: relative;
  margin-top: 40px;
  color: #fff;
  padding: 40px 20px;
  background: #333;
}
#footer a {
  text-decoration: none;
  color: #fff;
}
#footer a:hover {
  text-decoration: underline;
}

@media screen and (max-width: 767px) {
  #footer {
    padding: 20px 20px;
    background: #333;
  }
}
.navi-row {
  display: flex;
  margin-top: 40px;
}
@media screen and (max-width: 767px) {
  .navi-row {
    display: block;
    margin-top: 15px;
  }
}
/* sns-navi */
#footer .sns-navi {
  margin: 0 0 0 auto;
  padding: 0;
}
#footer .sns-navi li {
  display: inline-block;
  margin: 0 20px 0 0;
  padding: 0;
  font-size: 20px;
}
#footer .sns-navi li:last-child {
  margin-right: 0;
}

@media screen and (max-width: 767px) {
  #footer .sns-navi {
    margin: 20px 0 0;
    padding: 0;
  }
  #footer .sns-navi li {
    margin: 0 20px 0 0;
    padding: 0;
    font-size: 18px;
  }
}
/* sitenavi */
#footer .sitenavi {
  width: 50%;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer .sitenavi li {
  display: inline-block;
  margin: 0 0 0 20px;
  padding: 0;
}
#footer .sitenavi li:first-child {
  margin-left: 0;
}

@media screen and (max-width: 767px) {
  #footer .sitenavi {
    width: 100%;
    text-align: center;
    font-size: 12px;
  }
}

codepen用です。

sinjotigersは私のアカウントです。

See the Pen
Untitled
by マージン (@sinjotigers)
on CodePen.

今後はシェアボタンの解説もやっていきます。

Profile
プロフィール
   
Popular
人気記事
Archive
アーカイブ
Twitter
ツイッター