Adding Some Flair to HTML buttons
I’ll be showing you an easy way to make your buttons more interesting, using only HTML and CSS. No JavaScript required. First, you’re going to want to create a button:
Then, use your created CSS selector, in this case ‘btn’, and add it to your CSS stylesheet:
Then, add these CSS properties, for this example, we will especially be needing the cursor, transition, and overflow properties. If you are unsure what any of these do, take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties
To clear up some of the less obvious properties:
- The border tag set the size of your button and the color, so in this case, were going to set the color value to transparent. This will make it look like the button has no border, and just flows with the rest of the page
- The padding tag with create space between your content and the rest of the button
- The cursor is set to pointer, so whenever your mouse is over the ‘btn’ element, it will turn from a normal cursor into the little white hand ‘pointer’
- The transition time is the amount of time it will take for our ‘animation’ that we will be setting
- The overflow tag makes sure that nothing we will be adding to the button flows outside of the border of the button. This one is very important.
Then, add a hover action to the button, changing the font to white when we hover over our button(you’ll see why in a sec):
Now we’ll be doing something using the ::before modifier, which sets the content of the button *before* a certain action, in this case, the hover:
- The ‘z-index’ is set to negative one, which means that it ‘stacks’ behind the other elements on the button. This is so that our text stays in the front and the animation appears to show behind the text, instead of blocking it.
- The border-radius is used to round the edges of a certain thing. In this case, it will round the edges of our animation, to make it appear less boxy and flow more naturally.
In another ::before, we’ll be adding another property which pertains to the animation, this sets the content of the button *before* a certain action, in this case, the hover:
And now we’re done! You can play around with the elements such as the color, the background, the transition time etc, but the final product should look something like this:
For more info on some of the methods used, you can visit:
