Jump to content

Accordion With A Button Inside - Without Changing ALL Links on the Page

Recommended Posts

Posted

Site URL: https://cat-wedge-xh9c.squarespace.com/programs

I'm trying to create a list of the programs and services that we offer at the Community Center where I work. We're a small non-profit which is why I am doing 20 jobs and learning them as I go. I want two buttons to appear inside each accordion drop-down. One that says "Learn More" and one that says "Volunteer". I've figured out how to get the button in there. I've even figured out how to make it look decent, but it is changing EVERY link/button on my page when I do that and making them all look crazy. Here is the code I was using. I don't even remember where I found it. (The button won't link to google, obv, I just haven't gotten very far yet.) The password to the website is: bft2020 

<style> a:link, a:visited {
  background-color: #00B0B9;
  color: white;
  padding: 14px 25px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
}
  </style>

<a href="https://google.com" target="_blank">Volunteer</a>

Screen Shot 2020-09-04 at 15.11.15.png

Posted

Add to Home > Design > Custom CSS

div#block-yui_3_17_2_1_1599105038088_23671 a {
    background-color: #00B0B9;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}

 

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!)

  • 1 year later...
Posted

This worked perfectly for me too! I have styled mine to look exactly like the rest of my buttons, but I have one question - Can I add a hover colour as well, just like a normal button? Specifically, I would like to hover to be the same colour as the border

#block-yui_3_17_2_1_1638482498070_17084{a:link, a:visited {
  background-color: black;
  font-size: 14px;
  color: rgb(220,255,32);
  padding: 12px 25px;
   border: 2px solid rgb(220,255,32);
  text-align: center;
  text-decoration: none;
  display: inline-block;
   }}

Posted
On 12/10/2021 at 2:12 AM, Phil84vaive said:

This worked perfectly for me too! I have styled mine to look exactly like the rest of my buttons, but I have one question - Can I add a hover colour as well, just like a normal button? Specifically, I would like to hover to be the same colour as the border

#block-yui_3_17_2_1_1638482498070_17084{a:link, a:visited {
  background-color: black;
  font-size: 14px;
  color: rgb(220,255,32);
  padding: 12px 25px;
   border: 2px solid rgb(220,255,32);
  text-align: center;
  text-decoration: none;
  display: inline-block;
   }}

Just add :hover

div#block-yui_3_17_2_1_1599105038088_23671 a {
    background-color: #00B0B9;
    color: white;
    padding: 14px 25px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
}
div#block-yui_3_17_2_1_1599105038088_23671 a:hover {
    background-color: white !important;
    color:  #00B0B9 !important;
}

Replace with your block id

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!)

  • 9 months later...
Posted

Hi! I am not sure if anyone is still getting notifications for this thread, but I was wondering if it would be possible to do something like this, but allowing for buttons inside the accordion.

 

Many thanks!

Posted
17 hours ago, laura-doval said:

Hi! I am not sure if anyone is still getting notifications for this thread, but I was wondering if it would be possible to do something like this, but allowing for buttons inside the accordion.

 

Many thanks!

You can add link into accordion content, then we can give code to turn link to button

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!)

Posted
On 9/26/2022 at 10:31 PM, laura-doval said:

Hi! I am not sure if anyone is still getting notifications for this thread, but I was wondering if it would be possible to do something like this, but allowing for buttons inside the accordion.

 

Many thanks!

You can add a link then share link to page where you use accordion, we can give code to turn link to button.

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!)

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.