Jump to content

Using custom css to button

Recommended Posts

  • Replies 3
  • Views 3.4k
  • Created
  • Last Reply
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%
}

image.thumb.png.4494b31ad974b68c85bf21deb94d2256.png

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Try to remove the text in the snippet

#block-yui_3_17_2_1_1603904884238_6855 

BeyondSpace - Squarespace Website Developer

🖼️ Lightbox Studio (Enable Pinch/Zoom on lightbox)
🗓️ Delivery Date Picker (Squarespace Date picker form field)
💫 Gallery block 7.1 workaround
🥳 Sparkplugin Customisations Browsers (Browse +100 Spark plugin customisations)
🥳 Elfsight Template Browsers (Browse +1000 Elfsight widget Templates)

If you find my answer useful, let's leave a like or upvote so others with the same issue can find their solution. Thank you!

 

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.