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.

✎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

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 !!

See the Pen 3D_BUTTON{.CSS} by ADITYA RAJ (@aditya9576) on CodePen.

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