Jump to content

Squarespace animated button css

Recommended Posts

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>

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 2 weeks later...
  • 7 months later...

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?

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 🙂

Edited by Squaredspace
Link to comment
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

image.thumb.png.092be46e52d7df1b9add4af28270acb2.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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 🙂

Link to comment

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

Create an account or sign in to comment

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

×
×
  • 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.