MultiWEBPress
Wordpress & Shopify Experts

MultiWEBPress
Wordpress & Shopify Experts

How to create 3D CSS button? | Html & CSS

3D Button | MultiWebPress

Hello Friends, today in this blog you’ll learn how to create a 3D CSS Social Media Button using pure HTML & CSS. This task is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a How to create Footer in Html & CSS?.. Now it’s time to create a 3D CSS Buttons example using Hypertext Preprocessor Language (HTML) and CSS

Buttons are very essential elements in websites and other social accounts. With the help of buttons, one can easily share your website pages, social media pages, links, etc.

Generally, buttons are used to link pages and allow to reach new audiences and visitors on the websites.

On the preview images you can see, there are Social Media buttons (Facebook, Youtube, Instagram & Twitter) containing some hover and shadow effects. When you push over or click over it you can see 3D shadow visualization.  

There are many different ways to create a 3D Buttons (Social share buttons), one of which is the way we have designed it.

You can add anchor tag inside each button to redirect the user to your particular preferred social network site/account on a button click.

				
					 <a href=" Enter your Url">

If you’re finding difficulty understanding what is written in this blog you can also watch video youtube. Just scroll down to check video tutorial.

Video tutorial of creating 3D CSS button

You may also like:

If you like this 3D Button (Social Media Buttons) and want to use it in your project you can freely copy the paste it in your project with any restriction, And you can take this CSS Buttons to the next level with your creativity.

Also, I want you all to comment below if you have any questions in your mind.

3D Button (Social Media Share Button) [Source Codes]

To create this small task (3D  Button). You need to create two files. The two files are index.html and another one is a style.css file. Remember when you create an HTML file don’t forget to add a .html extension on HTML file and .css extension to your style file. 

Let’s create a Hypertext Markup Language(HTML) with the name of index.html and paste the below codes in your HTML file. Remember you’ve to create a file with a .html extension

HTML CODE

				
					<!DOCTYPE html>
<!--CODING BY https://multiwebpress.com/-->
<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" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
    <title>Social Media Buttons | MultiWebPress</title>
</head>
<body>
    <div class="buttons">
        <div class="style">
            <button class="facebook">
                <span><i class="fab fa-facebook-f"></i></span>Facebook
            </button>

            <button class="youtube">
                <span><i class="fab fa-youtube"></i></span>Youtube
            </button>

            <button class="instagram">
                <span><i class="fab fa-instagram"></i></span>Instagram
            </button>

            <button class="twitter">
                <span><i class="fab fa-twitter"></i></span>Twitter
            </button>
        </div>
    </div>
</body>
</html>

CSS CODE

Create a Cascading Style Sheet(CSS) file with the name of style.css and paste the below codes in your HTML file. Remember you’ve to create a file with a .css extension

				
					@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  place-items: center;
  background: linear-gradient(0deg, rgba(255,244,179,1) 0%, rgba(255,100,100,1) 100%);

}
.buttons{
  display: flex;
   align-items: center;
  justify-content: space-around;
  width: 500px;
  height: 300px;
 
}
.buttons .style{
  display: block;
 margin-left: 60px;
}
.buttons .style button{
  position: relative;
  width: 150px;
  margin: 40px 0;
  color: #fff;
  font-size: 20px;
  outline: none;
  display: block;
  height: 55px;
  font-weight: 800;
  text-shadow: 0px -1px 0px rgba(0,0,0,0.4);
  cursor: pointer;
  border: none;
  border-radius: 0 5px 5px 0;
  transition: all 0s ease-out;
}
.style button:active{
  top: 3px;
}
.style button.facebook,
.style button.facebook span{
  background: #3B5999;
  border-left: 1px solid #2E4476;
  box-shadow: 0px 5px 0px 0px #2E4476;
}

.style button.facebook:active{
  box-shadow: 0px 2px 0px 0px #2E4476;
}

.style button.youtube,
.style button.youtube span{
  background: #de463b;
  border-left: 1px solid #c02b21;
  box-shadow: 0px 5px 0px 0px #c02b21;
}

.style button.youtube:active{
    box-shadow: 0px 2px 0px 0px #c02b21;
  }

  .style button.instagram,
.style button.instagram span{
  background: #e1306c;
  border-left: 1px solid #c91d56;
  box-shadow: 0px 5px 0px 0px #c91d56;
}

.style button.instagram:active{
    box-shadow: 0px 2px 0px 0px #c02b21;
  }

  .style button.twitter,
  .style button.twitter span{
    background: #46C1F6;
    border-left: 1px solid #269BD0;
    box-shadow: 0px 5px 0px 0px #269BD0;
  }
  
  .style button.twitter:active{
      box-shadow: 0px 2px 0px 0px #269bd0;
    }

.style button span{
    position: absolute;
    left: -60px;
    line-height: 55px;
    font-size: 25px;
    display: block;
    font-weight: normal;
    height: 55px;
    width: 60px;
    top: 0;
    border-radius: 5px 0 0 5px;
}


.style button:active span{
    top: -3px;
}

.style button.facebook span{
    border-right:1px solid #2e4476;
}

.style button.youtube span{
    border-right:1px solid #c02b21;
}

.style button.instagram span{
    border-right:1px solid #c91d56;
}

.style button.twitter span{
    border-right:1px solid #269bd0;
}

.style button.facebook:active span{
    box-shadow:0px 5px 0px 0px #2e4476,
    6px 4px 2px rgba(0,0,0,0.3);
}

.style button.youtube:active span{
    box-shadow:0px 5px 0px 0px #c02b21,
    6px 4px 2px rgba(0,0,0,0.3);
}

.style button.instagram:active span{
    box-shadow:0px 5px 0px 0px #c91d56,
    6px 4px 2px rgba(0,0,0,0.3);
}

.style button.twitter:active span{
    box-shadow:0px 5px 0px 0px #269bd0,
    6px 4px 2px rgba(0,0,0,0.3);
}

After creating these two files & pasting codes, now run the files in your browser. You can run to any browser you have on your computer. (Google Chrome, Firefox, Internet explorer etc.)

That’s all, now you’ve successfully created 3D CSS Buttons using HTML & CSS.

If your code does have any bugs/errors/ or you’re facing any problems, then please comment down below or contact us from the contact us page.

Hope you enjoyed reading and watching the video. Please do like and subscribe to my youtube channel & follow me on Instagram.

Thanks in Advance!

Download Code Files

SHARE

WhatsApp
Facebook
Twitter
LinkedIn
Telegram

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*

MOST POPULAR
SHARE
CATEGORY
Categories

ABOUT US

MultiWebPress is a full-service web development agency that creates custom websites and online stores using WordPress and Shopify. Our team of skilled developers and digital strategists offer personalized solutions, including ongoing maintenance and support, to help businesses succeed online.

QUICK LINK

FOLLOW US

Facebook-f Youtube Instagram Twitter

Copyright © 2023 MultiWebPress | All Rights Reserved