hello and welcome to red stapler Channel in this tutorial I'm going to show you
the easiest pure CSS 3D text hover effect that literally anyone can make it
in couple minutes ready let's check it out
so let's start with adding radial gradient into our background. When working on things
like this it's much easier to use online generator tools like this one
for the text I'm going to create a span and assign class to it
now the CSS first i will transform the text to uppercase and increase the font
size and set the text color if you also want to change the font family here's
the place and next I'm going to move the text to
the center by setting 50% table and left and minus 50% translate
so the next step we are going to do is to add
two sets of layers of text shadow to simulate a 3D effect. The first set of
layers is going to simulate a depth of the text I'm going to set the x-offset and
blur radius to zero and set y-offset to one pixel. For a color I'm going to edit
it in RGB mode that's because when we add an extra layer we are going to
increase the y-offset and decrease the RGB value to make the color darker
and the second set of layers is going to be the
shadow of the text so we are going to use black color we'll be doing it the
same way as the first set except adding the blur radius and using less layers
this time
and now we have the base 3d effect the next step is to add a hover effect using
CSS pseudo class
we use the same text shadow as above and add a few more layers to the first set
and increase the shadow offset of the second set
also add a little translate and a transition to make a text appears to be
moving
and finally set the cursor to pointer for aesthetic purpose
okay we are ready let's see the result
so that's all for this tutorial. Any comments, feedbacks let me know and if you love
this video don't forget to like or subscribe to stay with us for more
updates thanks for watching and see you next time bye