[Resolved] How to apply predesigned button-styles

[Karsten]

Hi there,
I’m testing Mikes beautiful theme »dev«. Here’s my question: How can I apply the styles of the violet standard-button or the »text icon link« (instead of the standard blue style, I’m getting) without styling every single button manually?
Thanks in advance
Karsten

[Elvin]

Hi,

Most color related settings are set through WP Admin Dashboard > Appearance > Customize > Colors.

To change the color of the buttons, go to WP Admin Dashboard > Appearance > Customize > Colors > Buttons.

This color change will apply throughout the whole site. 🙂

[Karsten]

Hi Elvin,
thanks for your quick reply! I know how to change the colors of buttons, but when I add a new button via the editor to a page I only get the flat blue standard-button. But in the theme the violet button has box-shadow, transform etc. applied. How do I insert this kind of button or the text with icon button to a page?

[Elvin]

How do I insert this kind of button or the text with icon button to a page?

That one, you can do by adding custom CSS.

The hover effect you’re seeing is done by this:

.button {
	border-radius: 4px;
	box-shadow: 0 12px 20px -10px rgba(0, 0, 0, 0.3);
    -webkit-transition: all 500ms ease-in-out !important;
	transition: all 500ms ease-in-out !important;
}

.button:hover {
	box-shadow: 0 30px 20px -20px rgba(0, 0, 0, 0.3);
	-webkit-transform: translate3d(0, -4px, 0);
	transform: translate3d(0, -4px, 0);
}

What this CSS does is, it adds the hover and shadow effect your seeing on all buttons that have a “button” as its css class.

To apply this effect to a button on your page, you simply add the class “button” to your button and you do that by adding it to the button’s block settings “CSS Classes” field on Gutenberg Editor.

[Karsten]

Ah, o.k.! I’ve assumed that there would be a way to insert a styled button directly via Gutenberg. Maybe it’s easier to copy & paste an existing one.
Thank you so much for your quick help!!!

[Elvin]

No problem. 🙂

[Author]

Posts