# Add button for Google Calendar events

**URL:** <https://community.elfsight.com/t/add-button-for-google-calendar-events/132037>\
**Category:** Customization\
**Tags:** event-calendar\
**Created:** [July 16, 2025, 6:54pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037 "2025-07-16T18:54:28Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Ryan\_Conklin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/ryan_conklin/32/47452_2.png) [@Ryan\_Conklin](https://community.elfsight.com/u/Ryan_Conklin)\
**Post date:** [July 16, 2025, 6:54pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/1 "2025-07-16T18:54:28Z")

</div>

> [@The code to add button to Google Calendar events doesn't work correctly](https://community.elfsight.com/t/the-code-to-add-button-to-google-calendar-events-doesnt-work-correctly/132041/3):
>
> ```auto
> .global-styles, 
> .eapp-events-calendar-events-calendar-component a,
> .eapp-events-calendar-modal-modal a {
> display: inline-block;
> font-size: 12px;
> font-weight: bold;
> color: white;
> background-color: purple !important;
> padding: 10px 20px;
> border: 0px solid purple;
> border-radius: 20px;
> text-align: center;
> text-decoration: none;
> cursor: pointer;
> text-wrap: auto;
> overflow-wrap: anywhere;
> }
> 
> .global-styles,
> .eapp-events-calendar-events-calendar-component a:hover,
> .eapp-events-calendar-events-calendar-component a:focus,
> .eapp-events-calendar-modal-modal a:hover,
> .eapp-events-calendar-modal-modal a:focus {
> color: white !important;
> }
> 
> ```

Hi there Max,

I used this code for my events calendar below:  
.global-styles,  
.eapp-events-calendar-events-calendar-component a,  
.eapp-events-calendar-modal-modal a {  
display: inline-block;  
font-size: 12px;  
font-weight: bold;  
color: white;  
background-color: #57b947 !important;  
padding: 10px 20px;  
border: 0px #57b947;  
border-radius: 20px;  
text-align: center;  
text-decoration: none;  
cursor: pointer;  
text-wrap: auto;  
overflow-wrap: anywhere;  
}

.global-styles,  
.eapp-events-calendar-events-calendar-component a:hover,  
.eapp-events-calendar-events-calendar-component a:focus,  
.eapp-events-calendar-modal-modal a:hover,  
.eapp-events-calendar-modal-modal a:focus {  
color: white !important;  
}

A button appears in the event pop up window once clicked on the calendar but I’m not getting the button visible on the event card in the calendar view. I’ve attached the photos of what I’m seeing. How can I make the CTA’s appear on the event card in the calendar view and not have to be clicked into?

 ![Screenshot 2025-07-16 at 11.47.00 AM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/d/2/d2f9001019e9a98ed134e127db728e9fdffcff8e.jpeg)

---

<div class="post-metadata">

**Author:** ![Ryan\_Conklin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/ryan_conklin/32/47452_2.png) [@Ryan\_Conklin](https://community.elfsight.com/u/Ryan_Conklin)\
**Post date:** [July 16, 2025, 6:55pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/2 "2025-07-16T18:55:28Z")

</div>

![Screenshot 2025-07-16 at 11.47.14 AM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/9/1903a0a4fa63722e7bd711ed0315a0ce2bcb9f08.jpeg)

We want this button visible on the outside under the time field on the card.

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 17, 2025, 11:06am UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/3 "2025-07-17T11:06:45Z")

</div>

Hi there, @Ryan_Conklin 👋

It seems you haven’t added the linked text to the event description in your Google Calendar. It’s necessary for the button to appear in the event card:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/3/4/34c643afdcf347e96f1b587dfe37f9a9bcb4e20c.png)

Also, I’ve noticed that the code you’ve added applied the button styles to all buttons in the widget. To make it work fine, please use this code instead:

```auto
.global-styles, a {
display: inline-block;
font-size: 12px;
font-weight: bold;
color: white;
background-color: purple;
padding: 10px 20px;
border: 0px solid purple;
border-radius: 20px;
text-align: center;
text-decoration: none;
cursor: pointer;
text-wrap: auto;
overflow-wrap: anywhere;
}

.global-styles,
a:hover,
a:focus {
color: white !important;
}

```

  

Please check it out and let me know if it helped 🙂

---

<div class="post-metadata">

**Author:** ![Ryan\_Conklin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/ryan_conklin/32/47452_2.png) [@Ryan\_Conklin](https://community.elfsight.com/u/Ryan_Conklin)\
**Post date:** [July 17, 2025, 4:42pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/5 "2025-07-17T16:42:05Z")

</div>

> [@Max](#):
>
> ```auto
> .global-styles, a {
> display: inline-block;
> font-size: 12px;
> font-weight: bold;
> color: white;
> background-color: purple;
> padding: 10px 20px;
> border: 0px solid purple;
> border-radius: 20px;
> text-align: center;
> text-decoration: none;
> cursor: pointer;
> text-wrap: auto;
> overflow-wrap: anywhere;
> }
> 
> .global-styles,
> a:hover,
> a:focus {
> color: white !important;
> }
> 
> ```

This is what I had in my Google Calendar. Does my link have to say ‘button’?

 ![Screenshot 2025-07-17 at 9.41.26 AM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/0/e0409409ae60b6ac043b134207d0c31b2aefbeb0.png)

---

<div class="post-metadata">

**Author:** ![Ryan\_Conklin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/ryan_conklin/32/47452_2.png) [@Ryan\_Conklin](https://community.elfsight.com/u/Ryan_Conklin)\
**Post date:** [July 17, 2025, 4:47pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/6 "2025-07-17T16:47:20Z")

</div>

That broke my website and made the buttons global over my whole site using this code you just provided.

.global-styles, a {  
display: inline-block;  
font-size: 12px;  
font-weight: bold;  
color: white;  
background-color: purple;  
padding: 10px 20px;  
border: 0px solid purple;  
border-radius: 20px;  
text-align: center;  
text-decoration: none;  
cursor: pointer;  
text-wrap: auto;  
overflow-wrap: anywhere;  
}

.global-styles,  
a:hover,  
a:focus {  
color: white !important;  
}

 ![Screenshot 2025-07-17 at 9.44.15 AM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/8/c/8c5fcbb8055c416cc1886e3a893f308d555b47d3.jpeg)

---

<div class="post-metadata">

**Author:** ![Ryan\_Conklin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/ryan_conklin/32/47452_2.png) [@Ryan\_Conklin](https://community.elfsight.com/u/Ryan_Conklin)\
**Post date:** [July 17, 2025, 4:59pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/7 "2025-07-17T16:59:37Z")

</div>

How did this person even see this in Elfsight or was this from their website calendar? This what we want though. A clickable button from the card view without having to click into the event so a person can just click the CTA to get to the link to buy their tickets.

 ![Screenshot 2025-07-17 at 9.58.20 AM](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/e/4/e429778197046a85d8003d97fd2a2b28188b9113.jpeg)

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 17, 2025, 5:44pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/8 "2025-07-17T17:44:12Z")

</div>

Got it, thanks!

It seems that after the recent update, the classes of the widget elements have been changed, this is why the code isn’t working anymore.

I’ll discuss it with the devs and let you know if it can be adjusted 🙂

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 18, 2025, 1:16pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/9 "2025-07-18T13:16:20Z")

</div>

Hi there, @Ryan_Conklin 👋

Since the linked text is added to the Google Calendar description, you need to choose Description in the Event Elements to Display setting:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/7/17a1e0603ea761dd2dd42d289cdf12a1488ba78b.png)

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/a/c/ace7952ed9cf53b83c2e03689b2a657c5e3f1fed.png)

I understand that with the long descriptions, the cards look not so neat, but this is the only solution to display the button now.

And here is the adjusted code that will be applied to your custom button only (without breaking other buttons on your website 🙂

```auto
.global-styles,
.eapp-events-calendar-popup-location-content > a {
  display: inline-block;
  font-size: 12px;
  font-weight: bold;
  color: white;
  background-color: #57b947 !important;
  padding: 10px 20px;
  border: 0px #57b947;
  border-radius: 20px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  text-wrap: auto;
  overflow-wrap: anywhere;
}

.global-styles,
.eapp-events-calendar-events-calendar-component a:hover,
.eapp-events-calendar-events-calendar-component a:focus,
.eapp-events-calendar-modal-modal a:hover,
.eapp-events-calendar-modal-modal a:focus {
color: white !important;
}

```

---

<div class="post-metadata">

**Author:** ![Ryan\_Conklin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/ryan_conklin/32/47452_2.png) [@Ryan\_Conklin](https://community.elfsight.com/u/Ryan_Conklin)\
**Post date:** [July 18, 2025, 7:43pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/10 "2025-07-18T19:43:59Z")

</div>

Thank you for your help Max. Those long descriptions won’t work as there are events that don’t have any descriptions in them and it stretches to that long white container. Maybe it’s the picture file that cause that. There aren’t any other Calendar templates Elfsight has that would accommodate a button? Or is there any CSS we can add to this to make it so the card doesn’t stretch to be so tall?

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 21, 2025, 11:57am UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/11 "2025-07-21T11:57:21Z")

</div>

Since the button element isn’t supported in Google Calendar, this element isn’t available for the imported events.

However, if you manually add each event, you’ll be able to separately add a button and description.

For your case, our devs came up with a CSS code, cropping the part of the description after the button:

```auto
.eapp-events-calendar-grid-item-description p:has(a) ~ p {
  display: none;
}

```

  

Please try it out and let me know how it worked for you 🙂

---

<div class="post-metadata">

**Author:** ![Ryan\_Conklin](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/ryan_conklin/32/47452_2.png) [@Ryan\_Conklin](https://community.elfsight.com/u/Ryan_Conklin)\
**Post date:** [July 22, 2025, 6:36pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/12 "2025-07-22T18:36:38Z")

</div>

Do I take this code below and input into Elfsight or Google Calendar? Are you saying that I’d have to manually make each event in Elfsight and not have it linked to our Google Calendar?

```auto
.eapp-events-calendar-grid-item-description p:has(a) ~ p {
  display: none;
}

```

[/quote]

---

<div class="post-metadata">

**Author:** ![Max](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/max/32/710_2.png) [@Max](https://community.elfsight.com/u/Max)\
**Post date:** [July 22, 2025, 6:46pm UTC](https://community.elfsight.com/t/add-button-for-google-calendar-events/132037/13 "2025-07-22T18:46:05Z")

</div>

This code should be added to the Custom CSS field on the Style tab of your Event Calendar widget’s settings:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/c/4/c4ed127e0e7df9c6b1b98900d68e844b0ad83d7c.png)

  

If you want to display the button without the description on the event cards, the only way is to manually add events to the widget. This approach allows you to control whether to show the Description and Button elements separately.

> [@Ryan\_Conklin](#):
>
> Are you saying that I’d have to manually make each event in Elfsight and not have it linked to our Google Calendar?

However, if adding the button directly into the Google Calendar event descriptions and using the CSS code I provided works well for you, you’re welcome to continue importing events from Google Calendar 🙂