CSS 002: Gradient Buttons

Buttons. We’ve see them everywhere, but if you’re me, then your buttons would look just plain ugly. A button can be created simply with HTML markup, specifically with the <button> tag.

HTML <button> element

But I’m looking to make things PRETTY!! So I scoured the World Wide Web to try and find ways to fancy up my buttons and discovered gradient buttons. What’s cool about using gradient buttons is not just how pretty it looks, but how it can be done in pure CSS.

The following code sets up some default styling for a button, such as margin, padding, position, etc. I’ve also added empty pseudo elements before and after the button, which will result in more gradient effects seen later.

So the code above will produce the following button. Now this looks much better than the default button styles, but I haven’t used gradients just yet.

Initial style of button

I want to set up the gradients for the ::before and ::after pseudo elements, and to do this, I use the linear-gradient function. The linear-gradient function takes in a couple of arguments, which produces and image, which is why you’ll see it passed to a background-image attribute for each button.

linear-gradient(90deg, #7b81ec, transparent)
linear-gradient(90deg, transparent, #3bd1d3)

So the buttons above use the linear-gradient function. I pass in an angle that represents the position of the starting-point of the gradient line, followed by two HEX values, representing the color. I separate the colors using two instances of the linear-gradient function, hence why I pass in transparent as a value inside the function.

linear-gradient(90deg, #7b81ec, #3bd1d3)

Now I add some styling to the button, following the same format. When I combine all the styling applied to the button and the pseudo elements, which will produce the following button and all of its prettiness.

Final result

I can quickly swap other HEX values to produce different effects. Now, I am able to quickly make buttons with more panache, and as a result, more panache to any site.

Much pretty, more wow!!