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

Categories: Blog


louis · March 29, 2018 at 7:19 AM

nice solution! thx!

    Dean Tidwell · May 24, 2018 at 12:53 PM

    I use Bootstrap and was looking to do what you wrote in this blog and Google search helped me find that answer.

Anton · July 26, 2018 at 6:27 AM

Thanks! Great solution for my new project 🙂 Looks like an iOS 6 😉

Leave a Reply

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