Adding Buttons to Events Page

Site URL: https://www.somayogacenter.com/events

Hi there,

I have two questions that I am hoping can be solved with CSS. 

1. I'd love to stylize the hyperlinks on this page as "BOOK NOW" buttons if possible. For instance, on the May 21 event, the register now.
    
2. Is there a setting in Squarespace or a way to add CSS that would make each event "un-clickable". I don't want each event to go to it's own page with the same information when you click. I rather when users click each event, nothing happen! I just want this single page with all events listed.

https://www.somayogacenter.com/events

Thank you in advance!

#1. Add to Design > Custom CSS

/* register link to button */
div.eventlist-excerpt p a[href="/schedule"] {
    background-color: black;
    color: white;
    padding: 10px 20px;
    display: inline-block;
}

#2. Add this CSS

body#collection-6258945bbdbc0e332f335622 .eventlist-event {
    pointer-events: none;
}

Thank you @tuanphan! I had it working for a little, but I'm having trouble again. 

The buttons are no longer appearing and I can't click the links where they are supposed to be.

https://www.somayogacenter.com/events

Would it be too much trouble to take one more look?

I used the following code: 

 

/* register link to button */
div.eventlist-excerpt p a[href="/schedule"] {
    background-color: #1A3637;
    color: #F0E3D7;
    padding: 10px 20px;
    display: inline-block;
}

body#collection-6258945bbdbc0e332f335622 .eventlist-event {
    pointer-events: none;
}

On 5/3/2022 at 8:54 PM, SomaYogaCenter said:

Thank you @tuanphan! I had it working for a little, but I'm having trouble again. 

The buttons are no longer appearing and I can't click the links where they are supposed to be.

https://www.somayogacenter.com/events

Would it be too much trouble to take one more look?

 

I used the following code: 

 

/* register link to button */
div.eventlist-excerpt p a[href="/schedule"] {
    background-color: #1A3637;
    color: #F0E3D7;
    padding: 10px 20px;
    display: inline-block;
}

body#collection-6258945bbdbc0e332f335622 .eventlist-event {
    pointer-events: none;
}

Remove this code. It prevent click

body#collection-6258945bbdbc0e332f335622 .eventlist-event {
    pointer-events: none;
}

With button, use this new code

/* register link to button */
div.eventlist-excerpt p a {
    background-color: black;
    color: white !important;
    padding: 10px 20px;
    display: inline-block;
}