react-pagination-new
Version:
A simple and customizable pagination component for React applications.
41 lines (37 loc) • 808 B
CSS
.pagination {
display: flex;
justify-content: center;
align-items: center;
width: max-content;
margin: 40px auto 0 auto;
background-color: white;
padding: 10px 20px;
border-radius: 30px;
}
button {
cursor: pointer;
&.disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.page-button {
height: 30px;
width: 30px;
margin: 0 5px;
cursor: pointer;
transition: background-color 0.3s ease, color 0.3s ease;
border-radius: 50%;
display: grid;
place-items: center;
&.active {
background-color: #ef4423;
color: white;
}
}
.page-button:disabled {
cursor: not-allowed;
background-color: #f1f1f1;
color: #ccc;
border: 1px solid #ddd;
}