Social Media Icons With Gradient Hover Effect

Hello Friends, today in this blog you’ll learn how to create Social Media Icons with gradient hover effect using only HTML & CSS3.

Using simple CSS we can easily create this type of beautiful gradient icons or even buttons. If you’re a beginner in CSS then no problem you can easily create this type of icons instead you’ve knowledge about CSS Animation, Colors….It helps to level up your CSS skills.

Video Tutorial of Social Media Icons With Gradient Hover Effect

In the video you’ve seen that we create a beautiful animated social media icons with gradient hover effect using simple HTML & CSS. We simply import the icons from FontAwesome website using HTML & CDN Link. After this we write some simple & common CSS for styling the icons like color,width,height,position,border,list properties etc. and in the 2nd part we add some gradient color on hover effect on the icons and use them using CSS Animation.

So, enjoy the tutorial & learn something new today 🙂

Social Media Icons With Gradient Effect [ SOURCE CODE ]

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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.0">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title>Social Media Icons With Gradient Effect</title>
</head>
<body>
    <div class="dark">

        <ul class="btn-list rounded">
            <li>
                <a href="" class="btn-gradient rounded facebook">
                    <i class="fa fa-facebook"></i>
                </a>
            </li>
            <li>
                <a href="" class="btn-gradient rounded google-plus">
                    <i class="fa fa-google-plus"></i>
                </a>
            </li>
            <li>
                <a href="" class="btn-gradient rounded instagram">
                    <i class="fa fa-instagram"></i>
                </a>
            </li>
            <li>
                <a href="" class="btn-gradient rounded twitter">
                    <i class="fa fa-twitter"></i>
                </a>
            </li>
            <li>
                <a href="" class="btn-gradient rounded linkedin">
                    <i class="fa fa-linkedin"></i>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

body {
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #212121;
 }
 .dark {
     margin: 20px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
 }
 .dark .btn-gradient {
     color: rgba(255,255,255,.54);
     box-shadow: 0 0 1px rgba(255,255,255,0.54);
 }
 .dark .btn-gradient:hover {
     color: #fff;
 }
 ul li {
     list-style: none;
     display: inline-block;
 }
 .btn-gradient {
     width: 60px;
     height: 60px;
     text-align: center;
     display: block;
     margin: 20px;
     border-radius: 2px;
     transition: all 300ms;
 }
 .btn-gradient i {
     font-size: 30px;
     line-height: 2.1;
     vertical-align: middle;
 }
 .btn-gradient.rounded {
     border-radius: 50%;
     border: 1px solid rgba(255,255,255,.54);
 }
 @keyframes Gradient {
     0% {
         background-position: 50%;
     }
     50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0 50%;
    }
 }
 .dark .btn-gradient.facebook:hover {
     box-shadow: 0 5px 8px rgba(26,35,126,0.50);
     background: #3949ab;
     background: linear-gradient(to right,#3949ab 0%,#2196f3 100%);
     background-size: 400%;
     animation: Gradient 1s ease infinite;
 }
 .dark .btn-gradient.google-plus:hover {
    box-shadow: 0 5px 8px rgba(244,67,54,0.50);
    background: #f44336;
    background: linear-gradient(to right,#f44336 0%,#ff1744 100%);
    background-size: 400%;
    animation: Gradient 1s ease infinite;
}
.dark .btn-gradient.instagram:hover {
    box-shadow: 0 5px 8px rgba(63,81,181,0.50);
    background: #ffc107;
    background: linear-gradient(to right,#ffc107 0%,#f50057 50%,#3f51b5 100%);
    background-size: 400%;
    animation: Gradient 1s ease infinite;
}
.dark .btn-gradient.twitter:hover {
    box-shadow: 0 5px 8px rgba(33,150,243,0.50);
    background: #00bcd4;
    background: linear-gradient(to right,#00bcd4 0%,#2196f3 100%);
    background-size: 400%;
    animation: Gradient 1s ease infinite;
}
.dark .btn-gradient.linkedin:hover {
    box-shadow: 0 5px 8px rgba(3,169,244,0.50);
    background: #0288d1;
    background: linear-gradient(to right,#0288d1 0%,#2196f3 100%);
    background-size: 400%;
    animation: Gradient 1s ease infinite;
}

DOWNLOAD SOURCE CODE FILES

Author
Recent Posts

codingmaster

Social Media Icons With Gradient Hover Effect

Published by codingmaster on June 19, 2021June 19, 2021

0 Comments

Leave a Reply Cancel reply