Change Load More button color and background color (usual mode and on hover), hover animation and past events title color

CSS Codes Event Calendar
1

I figured out how to change both the button shape, animation, and font colors. I also have included changing the past events title to white. Please feel free to try them out, make changes, and have fun with it!

.global-styles,
.eapp-events-calendar-load-more-button-component {
    background-color: rgb(181, 8, 8);
    color: #fff;
    border-radius: 4px;
}
.eapp-events-calendar-load-more-button-component:hover {
  background-color: rgb(255, 149, 68);
  color: #fff;
  transform: scale(1.1);
}
.global-styles, [class^="eapp-events-calendar-load-more-button-component"] {
	font-weight: bold;
}
.eapp-events-calendar-layout-pastEventsTitle {
  color: rgb(229, 229, 229);
}

Note: This code should be added to the Custom CSS field on the Appearance tab of your widget’s settings :slightly_smiling_face:

2 Likes
4

Wow, what a brilliant solution @Kerrie_Doucette :fire:

Thanks a million for sharing it with us and yes, welcome to the Community!