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

Smartyart · September 4, 2020

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

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

tuanphan · September 4, 2020

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

Smartyart · September 8, 2020

This worked perfectly! Thank you SO much!

Phil84vaive · December 9, 2021

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

tuanphan · December 12, 2021

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

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

Question

Smartyart

Link to comment

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

tuanphan

Posted Images

4 answers to this question

Recommended Posts

tuanphan

Link to comment

Smartyart

Link to comment

Phil84vaive

Link to comment

tuanphan

Link to comment

Create an account or sign in to comment

tuanphan

Support

Community

Developers

Resources