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

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>

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;
}

This worked perfectly! Thank you SO much! 

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;
   }}

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

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!

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

Thanks!! Is there another forum discussion that explains how to turn the link into a button? 

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.