Home Whiteboard Practice Code Graphing Calculator Online Compilers Articles Tools
Tutorials Courses Jobs

How to create \"next\" and \"previous\" buttons with CSS?

CSS Web Development Front End Technology

Creating "next" and "previous" buttons with CSS is a common requirement for web pages, especially for multi-page content as it enhances navigation between different pages. These buttons provide an intuitive way for users to move through content sequentially.

Syntax

.button {
    display: inline-block;
    padding: value;
    background-color: color;
    color: text-color;
    border: width style color;
    border-radius: value;
    text-decoration: none;
}

.button:hover {
    background-color: hover-color;
    color: hover-text-color;
}

Example: Basic Next and Previous Buttons

The following example creates styled navigation buttons using anchor tags and CSS −

<!DOCTYPE html>
<html>
<head>
<title>Next and Previous Buttons</title>
<style>
    .nav-container {
        text-align: center;
        margin: 50px 0;
    }
    
    .nav-button {
        display: inline-block;
        padding: 12px 20px;
        margin: 0 10px;
        background-color: #007bff;
        color: white;
        border: 2px solid #007bff;
        border-radius: 5px;
        text-decoration: none;
        font-weight: bold;
        transition: all 0.3s ease;
    }
    
    .nav-button:hover {
        background-color: white;
        color: #007bff;
        border-color: #007bff;
    }
    
    .nav-button:active {
        transform: translateY(2px);
    }
</style>
</head>
<body>
    <h3>Navigation Buttons Example</h3>
    <div class="nav-container">
        <a href="#" class="nav-button">? Previous</a>
        <a href="#" class="nav-button">Next ?</a>
    </div>
</body>
</html>

Two blue navigation buttons appear side by side - "? Previous" and "Next ?". When hovered, they change to white background with blue text and border. When clicked, they have a slight downward movement effect.

Example: Rounded Navigation Buttons

This example creates buttons with rounded corners and gradient effects −

<!DOCTYPE html>
<html>
<head>
<title>Rounded Navigation Buttons</title>
<style>
    .rounded-nav {
        text-align: center;
        margin: 40px 0;
    }
    
    .rounded-button {
        display: inline-block;
        padding: 15px 25px;
        margin: 0 15px;
        background: linear-gradient(45deg, #ff6b6b, #ee5a24);
        color: white;
        border: none;
        border-radius: 25px;
        text-decoration: none;
        font-size: 16px;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        transition: all 0.3s ease;
    }
    
    .rounded-button:hover {
        background: linear-gradient(45deg, #ee5a24, #ff6b6b);
        transform: translateY(-2px);
        box-shadow: 0 6px 12px rgba(0,0,0,0.3);
    }
</style>
</head>
<body>
    <h3>Rounded Gradient Buttons</h3>
    <div class="rounded-nav">
        <a href="#" class="rounded-button">? Previous</a>
        <a href="#" class="rounded-button">Next ?</a>
    </div>
</body>
</html>

Two rounded buttons with orange-red gradient backgrounds appear. They have arrow symbols and shadow effects. On hover, the gradient reverses and buttons lift slightly with enhanced shadows.

Key Properties Used

Property Purpose
display: inline-block Makes buttons align horizontally while allowing padding/margins
padding Creates internal spacing for better button size
border-radius Adds rounded corners to buttons
text-decoration: none Removes default link underlines
transition Smooths hover effects and animations

Conclusion

Creating next and previous buttons with CSS is straightforward using anchor tags styled with background colors, borders, and hover effects. The key is using proper spacing, transitions, and visual feedback to create an intuitive navigation experience.

Updated on: 2026-03-15T14:33:17+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements