Carousel Button Styling 1

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

Copy
<a class="prev" onclick="plusSlides(-1)">&#10094;</a>
<a class="next" onclick="plusSlides(1)">&#10095;</a>

Copy
.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.

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

Copy
.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.

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

Copy
.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).