hello and welcome to red stapler channel in this tutorial I'm going to show
you how to create a cool 3d social media buttons that can be used on your website
in just a few minutes ready let's check it out first we are going to create a
wrapper and assign a twitter-button class name to it then we will set the
size padding background color and body radius of the button
also used effects layout to Center the button on the screen then add an inside
box shadow to create a 3d depth effect
next we're going to create a cover div that will be opened on Mouse hover the
structure of the cover will consists of three divs, outer, edge and inner we use
translatez to create a gap between outer and inner and use rotateX to
rotate the edge and the final result looks like this figure now let's set the
cover and all its direct children size to 100% position to absolute and top and
left to zero and set the background color for each one
the outer and edge should have a little bit darker color to simulate the light
effect then we will set the top and height off the edge and rotate it 90
degrees using center and top transform origin next we will use translateZ to
move the outer div closer to the screen to create a gap between inner div doing
this we need to set the perspective distance on parent div as well and
finally we will set the border radius of both inner and outer
now you won't see anything much until we add a rotate hover effect let's do it
I'm going to add 120 degrees rotation to cover and also set the transition
duration and timing function to ease
now it's rotating incorrectly let's change the transform origin off the
cover and set the transform style to preserve 3d okay looking good the next
step is to add a Twitter logo using SVG path I'm going to add this to both inner
and outer then I'm going to set the size of it to 40 pixels and add a little
touch of drop shadow
and add a text-align:center to copper to keep logo at the center of the button
almost there now we are going to add a shadow of the
button when it's open I'm going to create a shadow div and rotate it like
this figure I'm going to set the position to absolute 100% width on top
and zero left you can change the height of this div to adjust the shadow
distance and also add a border radius we use a transparent linear gradient to
create a shadow then add a 90 degrees rotate X using center table transform
origin now the shadow is in place we will need to add hover effect let's add
a small rotation and scale
now you see that the shadow is overriding the cover we can fix this by
using z-index to cover I'm going to also set the shadow opacity to zero and only
changed back to one on hover now it's time to add the actual follow button
inside the copper just create a new live outside the cover and copy over your
follow, subscribe or like button code inside and remove the width set on
the wrapper
one last final touch I'm going to add a small transparent gradient to the inner
and outer to create an emboss effect so it's not too bland you can use the same
concept to create another social media buttons like Facebook or YouTube as well
if you love this tutorial please like or subscribe to support us and stay tuned
for the next video thanks for watching and see you next time bye