3D BUTTON EFFECT

In this section we will learn how to create or add such an effect to a normal link text to provide it a 3D look.

#First create a link and then add a text inside it which you want to show on behalf of it. In this case we are going to create a attractive "LIKE" button for our websites or blog.

I will recommend you to first see the whole code. Because this will provide you an idea of how many other elements would be required by me to generate a 3D effect.

For example in this case we have used <span> and a <div> tag along with <a> {link} tag.

	<!DOCTYPE html>
	<html>
	<head>
	<title>Page Title</title>
	</head>
	<body>
	<center><a href="https://coding-greed.blogspot.com/" class="lin"><h2>CODING GREED</h2></a>
	<br><tt>click here &uparrow; if you like this Project!!</tt>
	</center>

	<a href="#" class="bt">
	<div>

	<span>LIKE</span>

	</div>
	</a>

	</body>
	</html>

view raw 3dbittonHTML.html hosted with ❤ by GitHub

✎NOTE: The number of extra tag can be used and there placement around the link text (i.e: here "LIKE") to get 3D effect after using CSS is totally depends on you.

#NOW Adding CSS:

There are generally two factors that we should have in our mind during creating 3D effects:

Use Of Shadows

The viewing angles

	body {
	background-color:#cccc;
	}
	h2{

	font-size:2.5em;
	color:red;
	box-shadow:2px 2px 5px grey;
	text-shadow:grey 2px 2px , white 4px 4px;
	}
	.lin{text-decoration:none;}

	div
	{
	position:absolute ;
	top:45%;
	left:30%;
	transform:translate(-50% , -50%);
	width:160px;
	height:40px;
	background-color:white;
	text-align:center;
	padding-top:8px;
	transform:skewY(-20deg) rotatex(-60deg) rotateZ(60deg) ;
	transition:0.4s;
	color:red;

	}
	div:hover{
	background-color:red;
	box-shadow: 60px 40px 10px rgba(0,0,0,0.5);
	color:white;
	}
	.bt{
	text-decoration:none;
	font-family:sans-serif;
	font-weight:bolder;
	font-size:30px;
	box-shadow:20px 20px 10px rgba(0,0,0,0.5);
	top:20px;
	}

	div:before{
	content:" ";
	position:absolute ;
	width:177px;
	height:20px;
	background-color:#b1b1b1;
	transform:skewX(60deg) rotateY(25deg);
	left:10px;
	top:48.1px;
	}

	div:after{
	content:" ";

	top:23px;
	right:-86px;
	position:absolute ;
	/* border:1px solid green;*/
	width:136px;
	height:22px;
	background-color:#b1b1b1;
	transform:skewX(59.5deg) rotateX(20deg) rotateY(-53deg) rotateZ(-5deg);


	}

view raw 3dbuttonCSS.html hosted with ❤ by GitHub

It is better to draw a rough sketch of your 3D effect on a page and then try to make it by using CSS.

However it is more difficult to give the 3D viewing angles effect than the shadow.

#For providing 3D viewing angles we can use:

SKEW
TRANSLATE
ROTATE
POSITION

By using combination of all these CSS property we can easily create a 3d effect.

#Some Important tips:

Instead of using multiple elements in HTML for multiple purpose, we can use the same element several time by using elemnt_name:before{} and elememt_name:after{} CSS property.
Use :hover property to add some more effect in these button.

#Final result:

Click on RESULT to see the OUTPUT !!

Use same steps to create other button like share, follow, or social media buttons.