How to turn Event page "source link" URL into button

I want to turn the Source URL to a button on the event pages. Any ideas on how to do this with CSS? 

Source URL turns the title into an external link, is it that title that you want to turn into a button? (style it as a button?) CAn you share your website URL?

Here is an example: Nathan Williams and the Zydeco Cha Chas — Peerless Rens Club

Try this Custom CSS:

a.eventitem-sourceurllink {
  padding: 6px 12px;
  background: #f2c14e;
  border-radius:6px;
}

Thanks for the response, Ziggy! I added your CSS to the site so you can see the result. Is there a way to target the text that reads "Source" with a display:none to hide it and to change the display text for the hyperlink to "Learn More" or "Click Here" or something similar? 

On 8/10/2023 at 6:44 AM, j__ said:

Thanks for the response, Ziggy! I added your CSS to the site so you can see the result. Is there a way to target the text that reads "Source" with a display:none to hide it and to change the display text for the hyperlink to "Learn More" or "Click Here" or something similar? 

You can use this CSS code

/* learn more text */
.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    margin-left: -50px;
}

.eventitem-sourceurl:before {
    content: "Learn more ";
    visibility: visible;
}

This is great @tuanphan! I've added that CSS so you can see the result. Is there anyway to make the URL display as the "Learn More" or "Purchase Tickets" rather than having that text display before the full (complex) link? 

Perfect! Thanks so much! 

Hi @tuanphan - I'm looking to do something similar on my site's individual event pages. I used your code and made a couple of adjustments, but I'd like it to look like the button I boxed in red in the attached screenshot. I'd also like the text to be white and add some space between the last line of text in the event description and the button. Can you please provide updated code to help fix this? Here's the code I have currently:

 

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    margin-left: -50px;
    margin-top: -15px;
    opacity: 0;
    display: block;
}

.eventitem-sourceurl:before {
    content: "Purchase tickets:";
    visibility: visible;
    padding: 10px 20px;
    background: #119861;
    border-radius: 0px;
}

Thank you!

On 1/7/2024 at 4:44 AM, socialstylate said:

Hi @tuanphan - I'm looking to do something similar on my site's individual event pages. I used your code and made a couple of adjustments, but I'd like it to look like the button I boxed in red in the attached screenshot. I'd also like the text to be white and add some space between the last line of text in the event description and the button. Can you please provide updated code to help fix this? Here's the code I have currently:

 

.eventitem-sourceurl {
    visibility: hidden;
}

.eventitem-sourceurl a {
    visibility: visible;
    margin-left: -50px;
    margin-top: -15px;
    opacity: 0;
    display: block;
}

.eventitem-sourceurl:before {
    content: "Purchase tickets:";
    visibility: visible;
    padding: 10px 20px;
    background: #119861;
    border-radius: 0px;
}

 

Thank you!

Can you share link to this event? We can check easier

@tuanphan The event from the screenshot has passed, so I selected an event coming up. Here's the link: https://www.barreverie.com/events-2-1/bourbon-dinner

Thank you!

On 1/10/2024 at 10:11 AM, socialstylate said:

@tuanphan The event from the screenshot has passed, so I selected an event coming up. Here's the link: https://www.barreverie.com/events-2-1/bourbon-dinner

Thank you!

I see you figured it out?

On 1/10/2024 at 9:29 PM, tuanphan said:

I see you figured it out?

Yes, sorry - thanks so much!