Making custom social media buttons

In this chapter we will look into making cool social media buttons with the CSS3. The main properties used are background gradients, transforms, transitions and @keyframes.

Example

Cool looking social buttons with CSS3 styling:

<!DOCTYPE html>
<html> 

<head>

<style type="text/css">

html {
    min-height:300px;
    font-family:Arial,sans-serif; font-size:110%; color:#666;
    line-height:1.8;
    background:#fff;
    background:linear-gradient(#fff,#aa6) no-repeat;
    /* ADD proprietary selectors if needed */
    }
* { 
    margin:0px;
    padding:0px;
    }
.container {
    width:80%;
    margin:0px auto; padding:24px;
    }
a {
    color:#fe5741; font-weight:bold;
    text-decoration:none;
    }	
.title {
    position:relative;
    color:#000;
    animation:ghost 1s ease;
    animation-fill-mode:both;
    /* ADD proprietary selectors if needed */
    }
.p {
    position:relative;
    animation:ghost 1s 1s ease;
    animation-fill-mode:both;
    /* ADD proprietary selectors if needed */
    }
.p2 {
    position:relative;
    animation:ghost 1s 1.3s ease;
    animation-fill-mode:both;
    /* ADD proprietary selectors if needed */
    }	
.social {
    margin-top:1.5em;
}
.social a {
    position:relative; display:block; float:left;
    margin:.5em; padding:.25em .5em;
    color:#fff;
    text-transform:lowercase;
    text-shadow:0 -1px 0 rgba(0,0,0,.2);
    border:1px solid red; border-radius:5px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 2px 2px rgba(0,0,0,.2);
    transition: all 1.2s ease-in-out;
    /* ADD proprietary selectors if needed */	
  }	
.social a:hover { 
    z-index:2;
    }		
.social a:hover {
    transform: scale(2) rotateX(360deg);
    transition: all .8s ease-in-out;
    /* ADD proprietary selectors if needed */
}	
.social a[href*="twitter"] {
    background:linear-gradient(#65b9d6,#38cdff);
    border-color:#589cb4;
    /* ADD proprietary selectors if needed */
    animation:ghost 1s 2.1s ease;
    animation-fill-mode:both;
    /* ADD proprietary selectors if needed */
}
.social a[href*="facebook"] {
    background:linear-gradient(#5972a7,#3b5998);
    /* ADD proprietary selectors if needed */
    border-color:#293c63;
    animation:ghost 1s 2.3s ease;
    animation-fill-mode:both;
    /* ADD proprietary selectors if needed */
    }
.social a[href*="google"] { 
    background:linear-gradient(#ea4335,#dc4e41);
    /* ADD proprietary selectors if needed */
    border-color:#b9416e;
    animation:ghost 1s 2.5s ease;
    animation-fill-mode:both;
    /* ADD proprietary selectors if needed */
    }
@keyframes ghost { /* ADD proprietary selectors if needed */
    0% {
        top: 20px;
        opacity: 0;
    }
    66% {
        opacity: 1;
    }
    100% {
        top: 0;
    }
}

</style>

</head>

<body>

    <div class="container">
        <h1 class="title">BrenkoWeb Tutorials</h1>
        <p class="p">Our name is <a href="#">BrenkoWeb.com</a></p>
        <p class="p2">We offer free online <a href="http://brenkoweb.com/tutorials">tutorials</a> and <a href="http://brenkoweb.com/articles">articles</a></p>
        <p class="social">
            <a href="https://twitter.com/brenkoweb">Twitter</a>
            <a href="https://www.facebook.com/Brenkoweb-1140219112691499/">Facebook</a>
            <a href="https://plus.google.com/+BrenkowebLLC">Google +</a>
        </p>
    </div>

</body>

</html>

›› go to examples ››

Making custom social media buttons

Example

Cool looking social buttons with CSS3 styling:

Comments

About

Contact

Get Connected