Hi Seth,

Thank you for getting back.

Yes, you can use a Custom CSS script to achieve the desired appearance.

Kindly use the below script(which you can adjust based on personal preference) to achieve this:

.nectar-flickity .flickity-prev-next-button {
  background: rgba(76, 86, 115, 0.25) !important; /* #4c5673 at 25% opacity */
  border-radius: 50%;
  transition: background 0.2s;
}

/* For the arrow icon color */
.nectar-flickity .flickity-prev-next-button .arrow {
  fill: #fff !important; /* White arrow */
}

/* One on hover: full opacity background */
.nectar-flickity .flickity-prev-next-button:hover {
  background: #4c5673 !important; /* 100% opacity */
}

Kindly try them and let us know how they go.

Thanks,

Hi Seth,

Thank you for the response.

This is because of the styles applied.

Please, how would you like it to be so that we can do the adjustments?

Thanks.

Hi Seth,

Kindly try the below and let us know if it suits the intended purpose:

.nectar-flickity .flickity-prev-next-button {
  background: rgba(76, 86, 115, 0.5) !important; /* #4c5673 @ 50% opacity */
  border-radius: 50% !important;                
  width: 40px !important;                      
  height: 40px !important;                     
  border: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  padding: 0 !important;                         
  overflow: visible !important;                   
}
.nectar-flickity .flickity-prev-next-button .flickity-button-icon {
  fill: #fff !important;
  stroke: #fff !important;
  width: 60% !important;   
  height: 60% !important;
  opacity: 1 !important;
  pointer-events: none;
}
.nectar-flickity .flickity-prev-next-button:hover {
  background: #4c5673 !important; 
  cursor: pointer;
}
.nectar-flickity .flickity-prev-next-button:before,
.nectar-flickity .flickity-prev-next-button:after {
  display: none !important;
}

Thanks.

That's great Seth,

Thank you for the positive response.

To include mobile responsiveness with the buttons kindly delete the previous one and use the below:

.nectar-flickity .flickity-prev-next-button {
  background: rgba(76, 86, 115, 0.5) !important; /* #4c5673 @ 50% opacity */
  border-radius: 50% !important;                
  width: 40px !important;                      
  height: 40px !important;                     
  border: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  padding: 0 !important;                         
  overflow: visible !important;                   
}
.nectar-flickity .flickity-prev-next-button .flickity-button-icon {
  fill: #fff !important;
  stroke: #fff !important;
  width: 60% !important;   
  height: 60% !important;
  opacity: 1 !important;
  pointer-events: none;
}
.nectar-flickity .flickity-prev-next-button:hover {
  background: #4c5673 !important; 
  cursor: pointer;
}
.nectar-flickity .flickity-prev-next-button:before,
.nectar-flickity .flickity-prev-next-button:after {
  display: none !important;
}
@media (max-width: 767px) {
  .nectar-flickity .flickity-prev-next-button.previous {
    left: 5px !important;  
  }
  .nectar-flickity .flickity-prev-next-button.next {
    right: 5px !important; 
  }
}

Hope this helps.

Thanks.

Oooh, quite interesting,seems some style overriding occurs in mobile.

Let's fix this:

.nectar-flickity .flickity-prev-next-button {
  background: rgba(76, 86, 115, 0.5) !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  z-index: 10;
  display: flex !important;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  padding: 0 !important;
  overflow: visible !important;
}
.nectar-flickity .flickity-prev-next-button .flickity-button-icon,
.nectar-flickity .flickity-prev-next-button .flickity-button-icon path {
  fill: #fff !important;
  stroke: #fff !important;
  opacity: 1 !important;
  pointer-events: none;
}
.nectar-flickity .flickity-prev-next-button:hover {
  background: #4c5673 !important;
  cursor: pointer;
}
.nectar-flickity .flickity-prev-next-button:before,
.nectar-flickity .flickity-prev-next-button:after {
  display: none !important;
}
@media (max-width: 767px) {
  .nectar-flickity .flickity-prev-next-button.previous {
    left: 5px !important;
  }
  .nectar-flickity .flickity-prev-next-button.next {
    right: 5px !important;
  }
}

Let's see how it goes.

Thanks,

This is because of the container width, as from the screenshot I can see that other slides are also within the view, so unless you want us to make each slide to occupy full width. This will push them(buttons) to the far end while each slide also occupying the full width.

Let me know how you want us to proceed with its customization.

Thanks.

My pleasure.

I appreciate your patience and cooperation to bring this to completion.

Looking forward to serving you in the near future.

Happy Coding!