Home / Unlabelled / Make a 3D Social media Button in HTML and CSS

Make a 3D Social media Button in HTML and CSS


in this tutorial, I will show you how to make a 3d button effect using HTML and CSS.
you will see that this is a simple effect where we will use box-shadow to make the 3d effect and we will use transform effect to make the button get down when we hover it.
now let me show you the source code of this project.

HTML CODE



<!DOCTYPE HTML>

<html>
    <head>
        <link rel="stylesheet" href="main.css">
        
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" integrity="sha384-oS3vJWv+0UjzBfQzYUhtDYW+Pj2yciDJxpsK1OYPAYjqT085Qq/1cq5FLXAZQ7Ay" crossorigin="anonymous">
    </head>

    
    <body>
    
            <div class="container">
                <div class="button">
                <p><i class="fab fa-facebook-square"></i>Facebook</p>
            </div>
            
           
                </div>
    </body>

</html>

CSS CODE


@import url('https://fonts.googleapis.com/css?family=Roboto');
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
.container{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    display: flex;
    flex-direction: row;
}
.button{
    padding: 10px 20px;
    background-color: #315c9a;
    border-radius: 8px;
    width: 200px;
    box-shadow:  0 7px  0 #103d7e;
    transition-delay: all .6s;
    margin-left: 15px;
}
.button i{
    margin-right: 12px;
}
p{
    font-size: 1.5rem;
    text-transform: uppercase;
    color: #fff;
    text-align: center;
    font-family: 'Roboto',sans-serif;
}
.button:hover{
    transform: translateY(7px);
    box-shadow: 0 0 0 #103d7e;
}

and that's it , i hope that you loved this tutorial, if you have any project that you want to see don't hesitate to comment .

Make a 3D Social media Button in HTML and CSS Make a 3D Social media Button in HTML and CSS Reviewed by Medics on May 28, 2019 Rating: 5

No comments:

Subscribe to: Post Comments ( Atom )
-->
Powered by Blogger.