Skip to main content
Crowdfunding
Python + AI for Geeks
Practice

Carousel Button Styling 1

In this guide, we'll explain how to style the previous/next buttons and indicators on a carousel using CSS.


Styling the Previous/Next Buttons

Previous/Next Button HTML
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
Previous/Next Button CSS
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 4px;
user-select: none;
}

.prev {
left: 0;
border-radius: 4px;
}

.next {
right: 0;
border-radius: 4px;
}

.prev:hover,
.next:hover {
background-color: rgba(0, 0, 0, 0.8);
}

Buttons often require precise visual effects for interaction, such as when a user hovers over them or clicks on them. CSS allows us to enhance these interactions visually.

Let's explore how we have styled the carousel.


Common Styles

First, the previous/next buttons are styled using the prev and next classes. The common styles for these classes include:

Previous/Next Button Common CSS
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
...;
}

Common styles are applied using a comma (,) to define multiple CSS classes.

  • cursor: pointer;: Changes the cursor to a hand icon when hovered over the button.

  • position: absolute;: Positions the buttons absolutely within the carousel, just like the text on the slides.

  • top: 50%;: Centers the buttons vertically on the slide by positioning them 50% from the top.

  • width: auto;: Automatically adjusts the button's width to fit its content.

  • padding: 16px;: Sets the button's internal padding to 16px.

  • margin-top: -22px;: Centers the button vertically by setting a negative top margin. This compensates for the default 50% top positioning, which places the button slightly lower than the center.

  • color: white;: Sets the button text color to white.

  • font-weight: bold;: Makes the text bold.

  • font-size: 18px;: Sets the text size to 18px.

  • transition: 0.6s ease;: Applies a smooth color transition effect over 0.6 seconds when the button is hovered over.

  • border-radius: 4px;: Rounds the button corners by 4px.

  • user-select: none;: Prevents text from being selected by dragging, ensuring the text doesn't look untidy when interacting with the button. Clicking is still permitted.


Individual Styles

The non-common parts of the prev and next classes are:

Previous/Next Button Individual CSS
.prev {
left: 0;
}

.next {
right: 0;
}

We define these separately as individual CSS classes.

The left arrow button, using the prev class, is positioned on the left side of the slider (left: 0).

The right arrow button, using the next class, is positioned on the right side of the slider (right: 0).

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.