Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Using custom css to button


cpmbarcelona

Question

  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

  • 0
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

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post
  • 0

Try to remove the text in the snippet

#block-yui_3_17_2_1_1603904884238_6855 

Greeting, it's BaNgan from BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement, Advanced Product Delivery Date Time PickerGeolocation Automatic Currency Converter, Sortable Table from GSheet
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...