Home Html CSS Tutorial Awesome Pagination Design Using Only HTML & CSS

Awesome Pagination Design Using Only HTML & CSS

328
0
pagination html css

Awesome Pagination Design Using Only HTML & CSS

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Pagination HTML CSS</title>
</head>

<body>
<section class="pagination">
    <ul class="pagination-items">
        <li>Prev</li>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>Next</li>
    </ul>
</section>

</body>

</html>

CSS


/*
 #23374d; 
 #0086FF;
 #9ACDFF; 

Box-shadow 
    -webkit-box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);
    -moz-box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);
    box-shadow: 1px 7px 14px 0px rgba(189,178,189,1); */

    body{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
        height: 100vh; 
         display: flex;
        justify-content: center;
        align-items: center;
    }

    .pagination{
        background: #0086FF;
        border-radius: 15px;
        padding-right:35px;
        -webkit-box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);
    -moz-box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);
    box-shadow: 1px 7px 14px 0px rgba(189,178,189,1);  
    }

    .pagination-items{
       color: #ffffff; 
       cursor: pointer; 
    }

    .pagination-items li{
        display: inline-block;
        padding: 15px 25px;
        font-weight: 800;
        clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    }
    .pagination-items li.active{
        background:  #23374d;
    }
    .pagination-items li:hover{
        background:#9ACDFF;
    }
    
        
            
       
(Visited 58 times, 1 visits today)

LEAVE A REPLY

Please enter your comment!
Please enter your name here