Cheeseboard Gradient Buttons Styling

Coffee Lounge
1

I suppose this question is mainly for @Cheese or anyone else that was in the meet up this morning.

The demo had some very cool gradient styled buttons. Almost 3D looking. Wish I had a screenshot to display. Anyone in the meet up know how this was done?

Custom CSS I take it?

1 Like
2

@Cheese will be the one who knows but I'd guess 99% sure it's css.

2 Likes
3

Really is nothing special although does look really nice. We try and stick to entirely stock classes for Bootstrap and maybe tweak them just the smallest amount possible. The Bootstrap Swatch we used (Slate) is here (and of course is available in Wappler). Bootstrap often gets knocked about a bit but when you dive in there really are some gems to be found.

Here is the full code from the page layout and the corresponding CSS file:

<button type="submit" class="btn btn-primary" is="dmx-button" value="">
                                                        <i class="fas fa-calendar-check me-2"></i>Add Day Planner Event
                                                    </button>

And the custom CSS:

}

.btn:hover::before {
  -webkit-transform: translateY(0);
  transform: translateY(0);
}

.btn-primary {
  background-color: #375a7f;
  border-color: #375a7f;
  color: #ffffff;
}

.btn-primary:hover {
  background-color: #2b4764;
  border-color: #2b4764;
  -webkit-box-shadow: 0 4px 12px rgba(55, 90, 127, 0.3);
  box-shadow: 0 4px 12px rgba(55, 90, 127, 0.3);
}

:slight_smile:

I'll provide links to the videos soon. Was late so I kind of ploughed through them and didn't look back. I'll improve them and provide some zoomed in footage on this type of thing. Please bare with me for a couple of days while I just catch a breath. Been a long old week this one hahaha.

If there is anything else you want to know please just ask away. Am happy to answer any questions.

Thanks for the kind words Brad!