[Resolved] How to apply predesigned button-styles

Home Forums Support How to apply predesigned button-styles

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1483800
    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

    #1483833
    Elvin
    Staff
    Customer Support

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

    A wise man once said:
    "Have you cleared your cache?"

    #1483850
    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?

    #1483895
    Elvin
    Staff
    Customer Support

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1483909
    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!!!

    #1483911
    Elvin
    Staff
    Customer Support

    No problem. 🙂

    A wise man once said:
    "Have you cleared your cache?"

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.