Squarespace animated button css

Hi,

I'm wondering if anyone is able to help me achieve these animated buttons please!  

https://codemyui.com/minimalistic-hover-effect-button-animations/

I would like to acheive the same effect as button 13, the code pen code is showing:

.btn-13 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}

Thank you!
 

Add a Code Block > paste this code

<button class="custom-btn btn-13">Read More</button>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"/>
<style>
  .custom-btn {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
  /**** BTN No. 13 ****/
.btn-13 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}
</style>

Thank you so so much!! This is great. Is there any way to center the button please? currently it is to the left. Thank you!!

Also how do i make the buttons linked to go to different pages please?

Thank you

14 hours ago, BLK said:

Also how do i make the buttons linked to go to different pages please?

Thank you

Can you share link to page where you added the code? We can imagine button easier to check

Hey Tuan, I am also looking into style #13, however, I would like to apply it globally to ALL buttons on my site. I would still like the option to be able to change the button colors in the fluid engine editor without having to write color-specific CSS for every button on my site. Is this something that is possible?

On 3/17/2024 at 2:26 AM, bonesie said:

Hey Tuan, I am also looking into style #13, however, I would like to apply it globally to ALL buttons on my site. I would still like the option to be able to change the button colors in the fluid engine editor without having to write color-specific CSS for every button on my site. Is this something that is possible?

Each button (header button, button block, form button, newsletter button, people section button, add to cart button...) have a different structure, so you need to share site url, we can check easier

Style #13. Which style are you referring to? Can you take a screenshot or share link?

These animated buttons are awesome. They're all great but I'm looking at how to use buttons 12-15. Doesn't look like it's a simple matter of inserting the code into the CSS block? I gave it a try and it didn't work for me.

On 4/5/2024 at 2:22 AM, Squaredspace said:

These animated buttons are awesome. They're all great but I'm looking at how to use buttons 12-15. Doesn't look like it's a simple matter of inserting the code into the CSS block? I gave it a try and it didn't work for me.

I think we can solve this with CSS, need to adjust a bit

If you share link to page where you use button on your site, we can check easier

The website is General 2 — kobold (squarespace.com), password is G5!6p56&46ed!

Site is a work in progress (so it looks a little messy), and I'm not sure if I want to use animated buttons throughout the site or only for specific pages. Also, I'm pretty sure the code didn't work because there is another code(s) for the buttons right now. I'm relatively new to Squarespace and CSS coding, so I'm still learning the ins and outs of it all 🙂

On 4/8/2024 at 3:32 AM, Squaredspace said:

The website is General 2 — kobold (squarespace.com), password is G5!6p56&46ed!

Site is a work in progress (so it looks a little messy), and I'm not sure if I want to use animated buttons throughout the site or only for specific pages. Also, I'm pretty sure the code didn't work because there is another code(s) for the buttons right now. I'm relatively new to Squarespace and CSS coding, so I'm still learning the ins and outs of it all 🙂

You mean these effects?

https://codepen.io/ahmedbeheiry/pen/aBdezY

https://ranunculus-fish-fhr3.squarespace.com/?noredirect

Hi @tuanphan, yes, those are the 4 effects I'd like to use as button options on my website. 

On 4/9/2024 at 10:45 PM, Squaredspace said:

Hi @tuanphan, yes, those are the 4 effects I'd like to use as button options on my website. 

With effect 12, you try this code to bottom of Custom CSS box

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #000;
    transition: all 0.3s ease;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    background-color: transparent !important;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover {
    color: #fff;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover:after {
    top: 0;
    height: 100%;
}

Thank you @tuanphan ! The code works in principal. Looks like I have to make some tweaks to transparency, color, etc. to make them work. What if I want to use the code only for certain buttons on certain sections or pages? Is that when I should add a code block inside a given section? I guess it's not as simple as adding a block ID or section ID to the code? I thought I could change some buttons to secondary buttons and change up the code to secondary accordingly, but that doesn't work. Sorry about asking these basic questions. Still learning the structure of how CSS coding works 🙂

To apply to buttons belong a specific section, use this code

[enter your data-section-id] {
a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:after {
    position: absolute;
    content: "";
    width: 100%;
    height: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background: #000;
    transition: all 0.3s ease;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element {
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    background-color: transparent !important;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover {
    color: #fff;
}

a.sqs-block-button-element--medium.sqs-button-element--primary.sqs-block-button-element:hover:after {
    top: 0;
    height: 100%;
}
}

Use this free tool to find data section id

https://chrome.google.com/webstore/detail/squarespace-id-finder/igjamfnifnkmecjidfbdipieoaeghcff

This works great @tuanphan. I actually tried using the section ID code but not sure why it didn't work for me, I must have inputted incorrectly. Thank you so much for your help!!