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:

Example 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:

--

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

My First Day At MSNACADEMY

Pitfall When Using Java Okta SDK JWT Verifier

SAGA Distributed Transaction Pattern in Microservices

Hourglass Finance Airdrop #1 Result

Docker Refresher for DevOps

Your Ultimate Guide to API Testing

Chef And Work (With Solution)— August COOKOFF Codechef

MiniMecha- Gameplay

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jamesdesousa

Jamesdesousa

More from Medium

A Wooden Box and Memories

Objects and Material

How to make a word count tool with vanilla JavaScript

How to block annoying notifications