Cara Membuat Efek Hover Social Icon di Bootstrap Lebih Menarik - Kursus Web Design Private Online 1 on 1‎

Salam hangat teman-teman, semoga sehat selalu ya. Pada kesempatan kali ini saya akan mencoba berbagi tips bagaimana Cara Membuat Efek Hover Social Icon di Bootstrap Lebih Menarik.

Seringkali teman-teman ingin menambahkan efek animasi pada website yang teman-teman buat supaya lebih menarik. Seperti memberi efek animasi pada hover social icon.

Ok, langsung saja saya kasih tau caranya Cara Membuat Efek Hover Social Icon di Bootstrap Lebih Menarik.

– Pertama ketikan codingan di bawah ini:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Home</title>

    <!-- CSS-->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Indie+Flower' rel='stylesheet' type='text/css'>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    
        <div class="col-md-12 text-center" style="padding-bottom:10px;">
        <h1>Animasi Icon Pada Bootstrap</h1>
        </div>

        <div class="col-md-12 text-center">
                    <ul class="social-network social-circle">
                        <li><a href="#" class="Rss" title="Rss"><i class="fa fa-rss"></i></a></li>
                        <li><a href="#" class="fb" title="Facebook"><i class="fa fa-facebook"></i></a></li>
                        <li><a href="#" class="twit" title="Twitter"><i class="fa fa-twitter"></i></a></li>
                        <li><a href="#" class="google" title="Google +"><i class="fa fa-google-plus"></i></a></li>
                        <li><a href="#" class="Linkedin" title="Linkedin"><i class="fa fa-linkedin"></i></a></li>
                    </ul>       
        </div>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<!--[if lt IE 9]>

<![endif]-->

</head>

<body>

<h1>Animasi Icon Pada Bootstrap</h1>

</div>

</ul>

</div>

</body>

</html>

– Kedua ketikan codingan css berikut ini:

ul.social-network {
  list-style: none;
  display: inline;
  margin-left:0 !important;
  padding: 0;
}
ul.social-network li {
  display: inline;
  margin: 0 5px;
}


/* footer social icons */
.social-network a.Rss:hover {
  background-color: #F56505;
}
.social-network a.fb:hover {
  background-color:#3B5998;
}
.social-network a.twit:hover {
  background-color:#33ccff;
}
.social-network a.google:hover {
  background-color:#BD3518;
}

.social-network a.Linkedin:hover {
  background-color:#007bb7;
}
.social-network a.Rss:hover i, .social-network a.fb:hover i, .social-network a.twit:hover i,
.social-network a.google:hover i, .social-network a.Linkedin:hover i {
  color:#fff;
}
a.socialIcon:hover, .socialHoverClass {
  color:#44BCDD;
}

.social-circle li a {
  display:inline-block;
  position:relative;
  margin:0 auto 0 auto;
  -moz-border-radius:50%;
  -webkit-border-radius:50%;
  border-radius:50%;
  text-align:center;
  width: 50px;
  height: 50px;
  font-size:20px;
}
.social-circle li i {
  margin:0;
  line-height:50px;
  text-align: center;
}

.social-circle li a:hover i, .triggeredHover {
  -moz-transform: rotate(360deg);
  -webkit-transform: rotate(360deg);
  -ms--transform: rotate(360deg);
  transform: rotate(360deg);
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  -ms-transition: all 0.2s;
  transition: all 0.2s;
}
.social-circle i {
  color: #fff;
  -webkit-transition: all 0.8s;
  -moz-transition: all 0.8s;
  -o-transition: all 0.8s;
  -ms-transition: all 0.8s;
  transition: all 0.8s;
}

a {
 background-color: #D3D3D3;   
}

ul.social-network {

list-style: none;

display: inline;

margin-left:0 !important;

padding: 0;

}

ul.social-network li {

display: inline;

margin: 0 5px;

}

/* footer social icons */

.social-network a.Rss:hover {

background-color: #F56505;

}

.social-network a.fb:hover {

background-color:#3B5998;

}

.social-network a.twit:hover {

background-color:#33ccff;

}

.social-network a.google:hover {

background-color:#BD3518;

}

.social-network a.Linkedin:hover {

background-color:#007bb7;

}

.social-network a.Rss:hover i, .social-network a.fb:hover i, .social-network a.twit:hover i,

.social-network a.google:hover i, .social-network a.Linkedin:hover i {

color:#fff;

}

a.socialIcon:hover, .socialHoverClass {

color:#44BCDD;

}

.social-circle li a {

display:inline-block;

position:relative;

margin:0 auto 0 auto;

-moz-border-radius:50%;

-webkit-border-radius:50%;

border-radius:50%;

text-align:center;

width: 50px;

height: 50px;

font-size:20px;

}

.social-circle li i {

margin:0;

line-height:50px;

text-align: center;

}

.social-circle li a:hover i, .triggeredHover {

-moz-transform: rotate(360deg);

-webkit-transform: rotate(360deg);

-ms--transform: rotate(360deg);

transform: rotate(360deg);

-webkit-transition: all 0.2s;

-moz-transition: all 0.2s;

-o-transition: all 0.2s;

-ms-transition: all 0.2s;

transition: all 0.2s;

}

.social-circle i {

color: #fff;

-webkit-transition: all 0.8s;

-moz-transition: all 0.8s;

-o-transition: all 0.8s;

-ms-transition: all 0.8s;

transition: all 0.8s;

}

a {

background-color: #D3D3D3;

}

– Ketiga ketik tag link untuk memanggil file css icon dan custom css, jangan lupa keikan custom.css sehingga tidak mengubah css bawaan bootstrap:

<link href="css/custom.css" rel="stylesheet">

1	<link href="css/custom.css" rel="stylesheet">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

1	<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

Ok, sekarang kita lihat hasilnya yah teman-teman:

Nah efek yang kita berikan tadi akan memutar icon social media dan merubah warna background-nya pada saat pointer kita arahkan pada icon.

Sekian tips dari saya kali ini tentang Cara Membuat Efek Hover Social Icon di Bootstrap Lebih Menarik.

Selamat mencoba dan tetap jaga kesehatan selalu yah teman-teman.

Facebook DUMET School

Categories