ADVERTISEMENT

Create Social Media Icons Using HTML & CSS Code

Telegram Group Join Now

ADVERTISEMENT

Create Social Media Icons Using HTML & CSS Code

social media icons css | social media icons css code

 

ADVERTISEMENT

 

ADVERTISEMENT

Welcome to the Codewithrandom blog. In this blog, we learn how to create Social Media Icons. We use HTML and CSS for these Social Media Icons.

Hope you enjoy our blog so let’s start with a basic HTML Structure for Social media Icons.

ADVERTISEMENT

HTML Code For Social Media Icons

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - Social Media Icons</title>
<link
rel="stylesheet"
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
/>
<link
rel="stylesheet"
href="https://netdna.bootstrapcdn.com/font-awesome/3.1.1/css/font-awesome.css"
/>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<a href="#" class="icon-button twitter"
><i class="icon-twitter"></i><span></span
></a>
<a href="#" class="icon-button facebook"
><i class="icon-facebook"></i><span></span
></a>
<a href="#" class="icon-button google-plus"
><i class="icon-google-plus"></i><span></span
></a>
<a href="#" class="icon-button youtube"
><i class="fa fa-youtube"></i><span></span
></a>
<a href="#" class="icon-button pinterest"
><i class="fa fa-pinterest"></i><span></span
></a>
<!-- partial -->
<script src="./script.js"></script>
</body>
</html>

There is all the Html Code for the Social Media Icons. Now, you can see output without CSS Code, then we write Css Code for our Social Media Icons.

ADVERTISEMENT

Restaurant Website Using HTML And CSS With Source Code

Only Html Code Output

 

ADVERTISEMENT

social media icons css | social media icons css code
Output

CSS Code For Social Media Icons

html {
    font-size: 2.5em;
}
body {
    background-color: #fff;
    padding: 25px;
    text-align: center;
}

/* Wrapper */
.icon-button {
    background-color: white;
    border-radius: 2.6rem;
    cursor: pointer;
    display: inline-block;
    font-size: 1.3rem;
    height: 2.6rem;
    line-height: 2.6rem;
    margin: 0 5px;
    position: relative;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    width: 2.6rem;
}

/* Circle */
.icon-button span {
    border-radius: 0;
    display: block;
    height: 0;
    left: 50%;
    margin: 0;
    position: absolute;
    top: 50%;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 0;
}
.icon-button:hover span {
    width: 2.6rem;
    height: 2.6rem;
    border-radius: 2.6rem;
    margin: -1.3rem;
}

/* Icons */
.icon-button i {
    background: none;
    color: white;
    height: 2.6rem;
    left: 0;
    line-height: 2.6rem;
    position: absolute;
    top: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    width: 2.6rem;
    z-index: 10;
}

.twitter span {
    background-color: #4099ff;
}
.facebook span {
    background-color: #3B5998;
}
.google-plus span {
    background-color: #db5a3c;
}
.tumblr span {
    background-color: #34526f;
}
.instagram span {
    background-color: #517fa4;
}
.youtube span {
    background-color: #bb0000;
}
.pinterest span {
    background-color: #cb2027;
}

.icon-button .icon-twitter {
    color: #4099ff;
}
.icon-button .icon-facebook {
    color: #3B5998;
}
.icon-button .fa-tumblr {
    color: #34526f;
}
.icon-button .icon-google-plus {
    color: #db5a3c;
}
.icon-button .fa-instagram {
    color: #517fa4;
}
.icon-button .fa-youtube {
    color: #bb0000;
}
.icon-button .fa-pinterest {
    color: #cb2027;
}

.icon-button:hover .icon-twitter,
.icon-button:hover .icon-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
    color: white;
}

@media all and (max-width: 680px) {
    .icon-button {
        border-radius: 1.6rem;
        font-size: 0.8rem;
        height: 1.6rem;
        line-height: 1.6rem;
        width: 1.6rem;
    }

    .icon-button:hover span {
        width: 1.6rem;
        height: 1.6rem;
        border-radius: 1.6rem;
        margin: -0.8rem;
    }

    /* Icons */
    .icon-button i {
        height: 1.6rem;
        line-height: 1.6rem;
        width: 1.6rem;
    }
    body {
        padding: 10px;
    }
    .pinterest {
        display: none;
    }
}

50+ HTML, CSS & JavaScript Projects With Source Code

Final Output Social Media Icons Html and Css

social media icons css | social media icons css code
Output

 

Live Preview Of Social Media Icons Using HTML & CSS

ADVERTISEMENT

Now we have completed our Social Media Icons. Here is our updated output with Html and Css. Hope you like social media icons Project you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development.

ADVERTISEMENT

Thank you!

In this post, we learn how to create Social Media icons in Html and Css. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by – Code With Random/Anki  

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT