HTML CSS Pagination Design | Roundie Pagination UI

How we can create a cool pagination design using HTML and CSS? Solution: HTML CSS Pagination Design, Roundie Pagination UI.

Mostly peoples who surf blogs on the internet at daily based, they probably know what is pagination. Pagination is the process of splitting the contents of a website, suppose you have 30 articles pagination will divide into 3 parts, then 10 articles can visible on a single page. This is only the design which I am sharing, that is not fully programming. I will share the program also very soon.

Today you will learn to create a roundie pagination UI design. Roundie means not all pages number in circles, that means the whole pagination element has a border-radius. As you know this only a UI design, you can implement this design to your program. This is just an example of how we can design the pagination bar. Previously I have shared a CSS Breadcrumb Design if you have seen yet then check it out.

So, Today I am sharing HTML CSS Pagination Design, A roundie pagination UI. I have used pure CSS and HTML to create the design, that is just a basic design. After all, this design has an attractive UI. Because I have used border-radius and shadow combination.

If you are thinking now how this roundie pagination UI actually is, Then see the preview given below.

Preview Of Roundie Pagination UI

See this video preview to getting an idea of how this design looks like.

https://webdevtrick.com/wp-content/uploads/pagination-design-html-css.mp4?_=1

Now you can see this visually. If you like this then get the source code of its.

You May Also Like:

• 8 Different Text Effects
• Responsive Testimonial Slider
• JavaScript Calculator Program
• CSS Overlay Menu

HTML CSS Pagination Design Source Code

Before sharing source code, let’s talk about it. I have used HTML list attribute <ul> and <li> for creating the design. In the <ul> tag (info) I have put a class named ‘pagination‘ for design it, Now the whole tag looks like this: <ul class="pagination"> 

After that, I have added a hyperlink <a> tag in the between of every <li> and </li> tags.  Because link will redirect to your next or previous page, but it’s not working you have put the program inside it. In the first and the last li, I have placed left & right arrow using Unicode codes. Now in the CSS section first I changed the background color and put a custom font using google fonts.

I gave pagination class which I have placed in the <ul> tag, gave border-radius, absolute position, margin to center, shadow, etc. For the li, put he size 60px by 60px and a border-radius of 4px. In this section, I have placed too many CSS properties, like fonts, color, text-align, etc. As you can see the is an active page number, for this created and placed a class named ‘active‘ in this class I have changed the background color and font color. The same values placed in the hover function.

That is the whole concept. You will understand fully after getting the codes because this is very easy stuff. For creating this design, you have to create only 2 files. One for the HTML and other for the CSS. Follow the steps to creating this without any error.

index.html

Create an HTML file named ‘index.html‘ and put these codes given here below.

style.css

Now create a CSS file named ‘style.css‘ and put these codes.

That’s It. Now you have successfully created HTML CSS Pagination Design, A Roundie Pagination UI. If you have any doubt or question comment down below.

Thanks For Visiting, Keep Visiting.