How to turn source links in events into buttons and display them in a summary block

Hi! So I'm halfway to successfully turning the source link for an event into a button. Just need help getting over the finish line. I found the following code in another forum post and it does work to turn the source link into a button on the events page. 

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    opacity: 0;
    display: button;
}

.eventitem-sourceurl:before {
    
  content: "Learn more";
    visibility: visible;
    padding: 0.7em 1.9em;
    background: #EBDB95;
    border-radius: 2px;

}

However, I can't get the button to inherit the general style for a button. I also tried just putting in the settings one by one in the CSS but since there's specific styling, I couldn't get it to replicate completely. This is what it looks like now (at the bottom). It looks fine but doesn't match the default button styles (the first button):

The second part of my question is how to then turn that source link into a button that appears in the summary box on the /events page underneath the appropriate item. Like having a button under each event below:

I've already removed the summary box's capability to link to the event page, which may or may not interfere 

.summary-item { 
  pointer-events: none
}
.summary-thumbnail-container {
  pointer-events: none
}

Thanks so much in advance to whomever can help!

PS: wasn't sure which URL you needed so this is the one in our backend: https://bullfrog-dog-5exj.squarespace.com/

@Veeraptor64 Hi! You can replace your existing code (the one you shared in your post) with the following to address the first issue.

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible !important;
    opacity: 0 !important;
    display: button !important
}

.eventitem-sourceurl:before {
    content: "Learn more" !important;
    visibility: visible !important;
    background: #ebdb95 !important;
    padding: var(--primary-button-padding-y) var(--primary-button-padding-x) !important;
    font-family: var(--primary-button-font-font-family);
    font-style: var(--primary-button-font-font-style);
    font-weight: var(--primary-button-font-font-weight);
    letter-spacing: var(--primary-button-font-letter-spacing);
    text-transform: var(--primary-button-font-text-transform);
}

@media screen and (max-width: 767px) and (orientation: portrait) {
    .eventitem-sourceurl:before {
        font-size: calc(~'(var(--primary-button-font-font-size-value) - 1)* calc(.012* min(100vh, 900px)) + 1rem') !important;
    }
}

@media screen and (min-width: 768px), screen and (max-width: calc(1871px)) and (orientation: landscape) {
    .eventitem-sourceurl:before  {
        font-size: calc(~'(var(--primary-button-font-font-size-value) - 1)* 1.2vw + 1rem') !important;
    }
}

@media screen and (min-width: 1872px) {
    .eventitem-sourceurl:before {
        font-size: calc(~'var(--primary-button-font-font-size-value)* 1rem') !important;
    }
}

I'm not quite sure I understand the second issue. Are you trying to add a button under each summary item/event on the events page?

Thank you so much. And yes, that's what I'm looking for. I want to get around the actual events page if possible and just have a button to that source link (usually an eventbrite link) under each item in the event summary block. 

As per the css code you posted, it works to format the button properly (thank you for that) but then it doesn't link to the source link. So just a static button. 

EDIT: Also out of curiosity, what is the @media screen aspect of the code do?

On 8/28/2024 at 4:48 AM, Veeraptor64 said:

Thank you so much. And yes, that's what I'm looking for. I want to get around the actual events page if possible and just have a button to that source link (usually an eventbrite link) under each item in the event summary block. 

As per the css code you posted, it works to format the button properly (thank you for that) but then it doesn't link to the source link. So just a static button. 

EDIT: Also out of curiosity, what is the @media screen aspect of the code do?

Do you still need help?

@media to say browser, code should run on desktop or mobile or tablet

Thanks for explaining. And yes I still need assistance @tuanphan. Also sorry for the delay I was on vacation

The code works to remove the summary box linking but I'd still like to somehow make the source link a button and right now, it creates the button fine but the link doesn't get added properly, so it's just a blank button.

On 8/27/2024 at 4:49 AM, Veeraptor64 said:

Hi! So I'm halfway to successfully turning the source link for an event into a button. Just need help getting over the finish line. I found the following code in another forum post and it does work to turn the source link into a button on the events page. 

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    opacity: 0;
    display: button;
}

.eventitem-sourceurl:before {
    
  content: "Learn more";
    visibility: visible;
    padding: 0.7em 1.9em;
    background: #EBDB95;
    border-radius: 2px;

}

However, I can't get the button to inherit the general style for a button. I also tried just putting in the settings one by one in the CSS but since there's specific styling, I couldn't get it to replicate completely. This is what it looks like now (at the bottom). It looks fine but doesn't match the default button styles (the first button):

 

The second part of my question is how to then turn that source link into a button that appears in the summary box on the /events page underneath the appropriate item. Like having a button under each event below:

I've already removed the summary box's capability to link to the event page, which may or may not interfere 

.summary-item { 
  pointer-events: none
}
.summary-thumbnail-container {
  pointer-events: none
}

Thanks so much in advance to whomever can help!

PS: wasn't sure which URL you needed so this is the one in our backend: https://bullfrog-dog-5exj.squarespace.com/

Can you share link to page in these screenshots?