Using custom css to button

Site URL: https://www.caiobelfiori.com/button-test

I am trying to apply the same css code for one of these 2 first buttons ( "hover me" and Shop Now"), created with a markdown, but when I try to apply to a Squarespace native button ( "Learn More") I haven't been able to.

Could you tell me how to do this?

Thanks so much

22 minutes ago, cpmbarcelona said:

Site URL: https://www.caiobelfiori.com/button-test

I am trying to apply the same css code for one of these 2 first buttons ( "hover me" and Shop Now"), created with a markdown, but when I try to apply to a Squarespace native button ( "Learn More") I haven't been able to.

Could you tell me how to do this?

Thanks so much

You should inspect the button id and replace the css accordingly, using Find Squarespace Ids chrome extension

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element {
    font-size: 1em;
    background: #3498db;
    color: #fff;
    border: .25rem solid #3498db;
    padding: .85em 2.75em;
    position: relative;
    z-index: 1;
    overflow: hidden
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element:hover {
    color: #3498db
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element::after {
    content: "";
    background: #ecf0f1;
    position: absolute;
    z-index: -1;
    padding: .85em .75em;
    display: block
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element::after {
    transition: all .35s
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element:hover::after {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    transition: all .35s
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element::after {
    top: 0;
    bottom: 0;
    left: -100%;
    right: 100%
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element.slide_from_right::after {
    top: 0;
    bottom: 0;
    left: 100%;
    right: -100%
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element.slide_from_top::after {
    left: 0;
    right: 0;
    top: -100%;
    bottom: 100%
}

#block-yui_3_17_2_1_1603904884238_6855 .sqs-block-button-element.slide_from_bottom::after {
    left: 0;
    right: 0;
    top: 100%;
    bottom: -100%
}

Thanks so much for the quick response, it works, although I would like to apply the style to all the buttons throughout the site, is there a way to do that?
Thanks in advance

Try to remove the text in the snippet

#block-yui_3_17_2_1_1603904884238_6855