hi there

so this is my first tutorial so don’t expect the best explanations.

So you decided to learn how to make the cool looking buttons for my posts navigation?

Let me think about it… Sure why not.

Bellow will be a brief explanation and preview of how the button works and was made.

html

<a class="nav-box">Cool Button</a>

For the html we will just need a simple <a> tag to be our button, next is where the magic happens.

css

.nav-box {
background-color: #c9950f;
border: 2px solid #d6c938;
padding: 10px 15px;
font-size: 1.1rem;
font-weight: bold;
color: #000000;
text-decoration: none;
border-radius: 25px;
box-shadow: 3px 3px 0px #000000;
transition: all 0.1s ease;
}
 

.nav-box:hover {
background-color: powderblue;
/* Makes the box look like it is physically being pressed down */ 
transform: translate(3px, 3px);
box-shadow: 0px 0px 0px #000000;
}

preview

Cool Button

Alright you got your button enjoy!

What you actually want to know how it moves?

Fine I will explain it to the best of my limited coding knowledge.

From my understanding the magic of how the button moves is from the transition and transform properties that moves the button, and to make the illusion of us pressing the button while hovering we remove the box-shadow that makes the button look 3d. Basically since we are moving our button the same amount of pixels as the size of our box-shadow by setting it to 0 when we hover it gives that illusion of pressing it down.

And that’s a simple explanation of my understanding how it works.

Now you may be asking wait how did you find this out and i will be like uummm…

I stole it…

From who? I have no idea…

since I… may have… uh… used… AI… to make it…

And all I really did was change the border radius and mess around with the parameters to make it my own and see how it worked.

So uh I dunno what to say now I hope this helped you in some form or way and I prefer to be honest on what I use AI on. Like helping me design the layout of my website and leaving me to just doing the details myself.

Ok byebye now.