# Change Load More Button Color

**URL:** <https://community.elfsight.com/t/change-load-more-button-color/53363>\
**Category:** Event Calendar\
**Tags:** Released\
**Created:** [May 20, 2024, 3:24pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363 "2024-05-20T15:24:47Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![David\_Petersen](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_petersen/32/26239_2.png) [@David\_Petersen](https://community.elfsight.com/u/David_Petersen)\
**Post date:** [May 20, 2024, 3:24pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/1 "2024-05-20T15:24:48Z")

</div>

Add a setting to change the color of the ‘Load More’ button.

---

<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:** [May 20, 2024, 5:15pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/2 "2024-05-20T17:15:03Z")

</div>

Welcome to the Community @David_Petersen 👋

I cannot but agree that it would helpful to have such an option in the widget editor. We’ll try to think about it in the future 🙂

As for now, you can change the Load More button color by adding this code to the Custom CSS field on the Appearance tab of your widget’s settings:

```auto
.global-styles,
.eapp-events-calendar-load-more-button-component {
    background-color: rgb(0, 0, 53);
    color: #fff;
}

```

---

<div class="post-metadata">

**Author:** ![David\_Petersen](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/david_petersen/32/26239_2.png) [@David\_Petersen](https://community.elfsight.com/u/David_Petersen)\
**Post date:** [May 20, 2024, 7:30pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/3 "2024-05-20T19:30:41Z")

</div>

This is great, thanks!

---

<div class="post-metadata">

**Author:** ![Rachel\_Allgood](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/rachel_allgood/32/7120_2.png) [@Rachel\_Allgood](https://community.elfsight.com/u/Rachel_Allgood)\
**Post date:** [July 23, 2024, 4:43pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/4 "2024-07-23T16:43:56Z")

</div>

Would be great to have the ability to Modify Color of “View More” Button in UX and not have to write custom CSS.

---

<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 23, 2024, 6:19pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/5 "2024-07-23T18:19:40Z")

</div>

Hey there @Rachel_Allgood 👋

If I got you right, you mean the setting to change the color of the Load More button.

Glad to say that we already have such a request in the Wishlist, and I’ve added your comment there too. We’ll keep you in the loop 🙂

---

<div class="post-metadata">

**Author:** ![VirtualCount\_Bookkee](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/virtualcount_bookkee/32/10026_2.png) [@VirtualCount\_Bookkee](https://community.elfsight.com/u/VirtualCount_Bookkee)\
**Post date:** [August 12, 2024, 3:16am UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/6 "2024-08-12T03:16:25Z")

</div>

I would like to have the option to choose the color of the Load More button. I have this plugin on a dark background.

---

<div class="post-metadata">

**Author:** ![Helga](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/helga/32/1155_2.png) [@Helga](https://community.elfsight.com/u/Helga)\
**Post date:** [August 12, 2024, 4:21pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/7 "2024-08-12T16:21:12Z")

</div>

This is a reasonable idea, thanks a lot for sharing, @VirtualCount_Bookkee!

For now, please try to use this CSS code, it should work:

```auto
.global-styles,
.eapp-events-calendar-load-more-button-component {
    background-color: rgb(0, 0, 53);
    color: #fff;
}

```

Just add it to the Custom CSS field on the Appearance tab of your widget’s settings 🙂

---

<div class="post-metadata">

**Author:** ![VirtualCount\_Bookkee](https://sea2.discourse-cdn.com/flex020/user_avatar/community.elfsight.com/virtualcount_bookkee/32/10026_2.png) [@VirtualCount\_Bookkee](https://community.elfsight.com/u/VirtualCount_Bookkee)\
**Post date:** [August 12, 2024, 4:42pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/8 "2024-08-12T16:42:02Z")

</div>

You are all so impressive! Thank you!

---

<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:** [February 11, 2026, 12:47pm UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/9 "2026-02-11T12:47:33Z")

</div>

Friends, great news: this feature request is in the **Design** stage now!

We’ll keep you updated on the progress 🙂

---

<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 8, 2026, 9:21am UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/11 "2026-07-08T09:21:24Z")

</div>

Status Update: the feature moved to the **Development** stage 🎉

---

<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, 2026, 11:35am UTC](https://community.elfsight.com/t/change-load-more-button-color/53363/12 "2026-07-22T11:35:08Z")

</div>

Hey everyone!

We’re happy to share the feature is already live 🎉

Since the Load More button was previously replaced with the pagination buttons, you can change the color of these buttons in the dedicated section on the **Theme** tab:

 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/f/e/fe24498c519428f950faf3ee2a811c9d0658c87f.png) ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/1/b/1b1c52047e992aa41594e9c6bfec3fbff29c336e.png)  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/elfsight/original/3X/0/8/081a23d46c524efd408d85b95c9acb4eb1f33076.png)

Find more new options in this post: [Event Calendar: Change color of each widget element, font, size settings and more! 🚀](https://community.elfsight.com/t/event-calendar-change-color-of-each-widget-element-font-size-settings-and-more/168887)