Easy Gradient Buttons for Bootstrap v4

I just started a job that is using Bootstrap v4. I’m happy with the functionality but I miss having a not so plain looking button. Here is the CSS code I am using to add easy gradients on my Bootstrap v4 buttons:

.btn {
    background-image: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.2) 49%, rgba(0,0,0,0.15) 51%, rgba(0,0,0,0.05));
    background-repeat: repeat-x;

Here are some example buttons to show you what this change looks like in the wild:

See the Pen Bootstrap v4 Gradient Buttons Examples by Chris West (@cwestify) on CodePen.

As you can tell by the 4 lines of CSS I added, the fix is simple and as seen in the example, the buttons look nice. Let me know what you think and as always, happy coding :cool:.

Leave a Reply

Your email address will not be published. Required fields are marked *