[Resolved] how to make button like GP is using

[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)

[David]

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);
}

[Rohan Verma]

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

[David]

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.

[Author]

Posts