Skip to main content
Practice

Carousel Button Styling 1

In this article, we will explain how to style the "previous" and "next" buttons and indicators of a carousel with CSS.


Styling Previous / Next Buttons​

Previous/Next Buttons HTML
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>
Previous/Next Buttons 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);
}

Since buttons involve user interaction (like hovering or clicking), it is essential to add detailed visual effects with CSS.

Let's go through how the carousel has been styled.


Common Styles​

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

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

The common styles have been applied as shown above. You can define CSS styles for multiple classes separated by a comma (comma).

  • cursor: pointer;: Changes the cursor to a pointer (like a hand) when hovering over the button.

  • position: absolute;: Positions the buttons absolutely inside the carousel, similar to the text inside the slides.

  • top: 50%;: Positions the button at 50% of the top, i.e., vertically centered in the slide.

  • width: auto;: Adjusts the button width to fit the content automatically.

  • padding: 16px;: Sets the inner padding of the button to 16px.

  • margin-top: -22px;: Moves the button up by 22px to vertically center it better, as top: 50% alone would position it slightly lower than the center.

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

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

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

  • transition: 0.6s ease;: Smoothly changes the button background color over 0.6 seconds when hovered.

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

  • user-select: none;: Prevents the text in the button from being selected or dragged, to maintain a clean appearance when interacting with the button.


Individual Styles​

The specific parts for the prev and next buttons that are not common are:

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

.next {
    right: 0;
}

The left arrow button with the prev class is placed on the left side of the slide (left: 0) and the right arrow button with the next class is placed on the right side (right: 0).

Want to learn more?

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