[Resolved] how to make button like GP is using

Home Forums Support how to make button like GP is using

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1349077
    sanu kumar

    how to make a button like GP is using: https://ibb.co/9pLf7PQ

    Also how to achieve shadow effects when someone goes to the button. (hover effects)

    #1349350
    David
    Staff
    Customer Support

    Hi there,

    try this CSS:

    .wp-block-button .wp-block-button__link,
    a.button,
    a.button:visited,
    button,
    html input[type=button],
    input[type=reset],
    input[type=submit] {
        border-radius: 5px;
        border-width: 4px;
        border-bottom: 2px solid rgba(0, 0, 0, .2);
        transition: color .1s ease-in-out, background-color .1s ease-in-out, border-color .1s ease-in-out, transform .2s ease-in-out;
        transform: translateY(0);
    }
    
    .wp-block-button .wp-block-button__link:hover,
    a.button:hover,
    a.button:visited:hover,
    button:hover,
    html input[type=button]:hover,
    input[type=reset]:hover,
    input[type=submit]:hover {
        transform: translateY(0);
        box-shadow: 0 3px 7px 0 rgba(0, 0, 0, 0.4);
    }
    
    #1349629
    Rohan Verma

    So, how do I put that button in the links from the editor?

    #1349704
    David
    Staff
    Customer Support

    Hi there,

    can you explain what you mean ? That code will style all the Theme buttons plus the button created by the core button block in the post editor.

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