Hello Friends, today in this blog you’ll learn how to create a Animated 3D Flip Button using pure HTML & CSS. This is for beginners who want to learn new stuff using HTML & CSS. Recently, I have shared a Floating .. Now it’s time to create a Animated 3D Button using HTML & 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.
You can add <a href=””> tag inside each button to redirect the user to your particular preferred social network site/account on a button click.
On the preview images you can see, there are two button (3D Buttons) containing some hover and 3D effects. When you hover on the buttons you can see 3D effect.
There are many different ways to create a 3D Buttons (Button in HTML & CSS), one of which is the way we have designed it.
If you’re finding difficulty understanding what is written in this blog you can also watch video of this on my video channel. Just scroll down to check video tutorial.
If you like this 3D Flip Button and want to use it in your project you can freely copy then paste it in your project without any restriction, And you can take these Flip Buttons to the next level with your creativity.
To create this small task (3D Flip 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.
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/css?family=Montserrat:600&display=swap');
body{
margin:0;
padding:0;
height:100vh;
align-items:center;
display:flex;
justify-content: center;
background: linear-gradient(315deg, #fff 0%, #d7e1ed 75%);
}
span{
display: inline-flex;
position: relative;
width: 180px;
height: 55px;
margin:0 15px;
perspective: 1000px;
}
span a{
font-size: 19px;
letter-spacing: 1px;
transform-style: preserve-3d;
transition: transform .25s;
transform: translateZ(-25px)
font-family:'Montserrat', sans-serif;
}
span a:before,
span a:after{
position: absolute;
content: "3D BUTTON";
height: 55px;
width: 180px;
display: flex;
align-items: center;
justify-content: center;
border: 5px solid #dd5f24;
box-sizing: border-box;
}
span:nth-child(1) a:before{
color: #dd5f24;
transform: rotateY(0deg) translateZ(25px);
}
span:nth-child(1) a:after{
color: #fff;
background: #dd5f24;
transform: rotateX(90deg) translateZ(25px);
}
span:nth-child(2) a:before{
color: #dd5f24;
transform: rotateX(-90deg) translateZ(25px);
}
span:nth-child(2) a:after{
color: #fff;
background: #dd5f24;
transform: rotateX(0deg) translateZ(25px);
}
span:nth-child(1) a:hover{
transform: translateZ(-25px) rotateX(-90deg);
}
span:nth-child(2) a:hover{
transform: translateZ(-25px) rotateX(90deg);
}
Now 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
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 Flip 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!