40 CSS List Style Examples
A carefully curated collection of the top free HTML and CSS list style code examples. These list style examples each contain unique designs, animations, effects, and colors that make them suitable for numerous web development applications.
Title:
CSS List Item Hover Effect
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An attractive CSS list style that has a minimal yet interesting shift effect upon hover. It was created using pure HTML and CSS.
Title:
Transform Skew Property And Nice List Styles
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This list style has a beautiful layout created using only HTML and CSS. When you hover over an item it will show the read more button with a smooth fade-in and sliding effect.
Title:
Checklist Animation — Only CSS
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This beautifully designed CSS list style checklist template is created with pure HTML and SCSS. When you click on any list item, it will strike through the item with a smooth animation effect.
Title:
CSS List Item Hover Effect
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Beautiful list style created with only HTML and CSS. Produces an animated slide-in effect with vibrant color upon hovering on the list items.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Forbes leaderboard CSS list style created using pure HTML and SCSS. When you hover on a list item, it will pop up a list item with a decent animation effect. It has also given a nice shadow to list items.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A leaderboard with a list style layout created using pure HTML and SCSS. It has a gradient background with the color orange and red. It looks amazing and decent. When you hover on the list item, it will show a pop-up effect
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple yet beautiful gradient ordered CSS list style layout created using HTML and SCSS. It looks decent with the shadow effects in each list item.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This to-do list style is one of a kind as it features a beautifully animated Terrarium. It was created using HTML, SCSS, and Javascript that blooms eventually as you complete your tasks
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A pure HTML and CSS list style that has a beautiful transition when a list item is hovered. Each list item field changes color and has a zoom-out effect on hover.
Title:
RemindMe App Concept(CSS Animations & Mobile)
Author:
Created on:
Made with:
HTML, SCSS, Javascript(Babel)
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This is a unique reminder list style created using HTML, SCSS, and Javascript that displays an animated timer and completion percentage of each list item. It also has speech commands and voice recognition that are done using Babel.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Pretty and useful checklist-style design beautifully created using only HTML and CSS. Changes the color of the field upon click.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An animated to-do list created with pure HTML and SCSS that changes color to light purple when you click on the to-do item and also changes its icon with a smooth animation effect when you click on it.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Highly functional minimalistic CSS list style. Provides in-list dropdown options created using HTML and CSS
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A lovely to-do list created using HTML, SCSS, and JavaScript, this vacation to-do list uses a fading-in effect to indicate that the box is marked when you click on the item.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This notepad CSS style list created using SCSS and Jquery actually gives you the feel of using a notepad with it’s amazing animations and styling.
Title:
Animation Loading Modules
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A CSS list style created in the form of a loading module. Creates a continuous animation of the prespecified list items with fade-in and fade-out effect that stops at the last item.
Title:
CSS-only Todo List Checkbox Animation
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An interactive to-do list that uses HTML, CSS(Less), and JavaScript. When you click on the checkbox of a list item, it will strike through the text with amazing animation.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Simple and very easy to customize list style. Created using pure HTML and CSS. Gives a highlighting effect upon hover.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A simple and delightful animated dropdown list style created with HTML, CSS, and jQuery. When you click the button, the button layout will change, and the list items will appear one by one, with a smooth dropdown effect.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A classic pricing table that contains a cool list style hover effect with a modern touch given using HTML and Bootstrap CSS. Upon hover, the list items smoothly change color and shift slightly.
Title:
UI Motion — Shipping Concept
Author:
Created on:
Made with:
HTML, SCSS, javascript(Babel)
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A super fun animated shipping CSS list style that uses some super cool animations upon click.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An elegant to-do list layout that incorporates HTML, CSS, and Vue.js for striking through text and animation effects when clicking on the list items. You can also delete them as well.
Title:
Interactive ToDo List Using HTML-CSS
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An interactive and modish to-do list that was created using HTML, SCSS, and Java Script. It has a decent look that can easily fit into a dark color scheme website. It lets you add and delete items
Title:
Advanced TimeLine: HTML/CSS/Javascript
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Modern and innovative timeline or milestone list style created using advanced javascript and CSS. Looks super sleek and provides collapse options.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A charismatic CSS list style created using HTML(Pug) and SCSS and jQuery. This list gives a beautiful and cicular scrolling effect to give a list 3D decent look. This type of list is suitable for displaying important updates on the website.
Title:
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This app presents a beautiful CSS to-do list layout created using HTML, SCSS, and JavaScript. You can add items to the list, and it will also display the count of each item, along with a way to sort the items by completion.
Title:
Context menu with Feather icons
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
This is a super minimal and useful CSS list-style. It is perfect for those who want to get things done quickly and efficiently. It has a descriptive toolbox type interface created using SCSS and Javascript.
Title:
Morphing Tab Button with List
Author:
Created on:
Made with:
Responsive:
Dependencies:
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A compact CSS list style dropdoen menu from a morphing button created using HTML, SCSS, and jQuery. When you click on the button, a list of items appears with smooth sliding effects. When you hover over the list item it will highlight it with a fade-in white effect.
CSS styling of product list using divs (Demo 3)
The following tutorial shows you how to use CSS to do «CSS styling of product list using divs (Demo 3)».
CSS Style
The CSS style to do «CSS styling of product list using divs (Demo 3)» is
body !-- w w w. d em o2 s . co m --> background-color:lightblue; > .container < background-color:lightgray; width:100%; max-width:1000px; margin:0 auto; > .productsList < background-color:lightseagreen; margin:0; padding:0; list-style:none; > .productsList li < display:table; width:100%; background-color:lightgreen; margin:10px 0; padding:0; border:1px solid #CADFE4; > .productsList .productImage, .productsList .productDescription < display:table-cell; vertical-align:top; > .productsList .productImage < background:red; >
HTML Body
body> div >"container"> h2>Products list below ul >"productsList"> li> div >"productImage"> IMG div >"productDescription"> h3>HEADING OF THE PRODUCT p>description of the product The following iframe shows the result. You can view the full source code and open it in another tab.
html> head> meta name="viewport" content="width=device-width, initial-scale=1"> style id="compiled-css" type="text/css"> body !-- w ww . d e mo 2 s . c o m --> background-color: lightblue; > .container < background-color: lightgray; width: 100%; max-width:1000px; margin: 0 auto; > .productsList < background-color: lightseagreen; margin: 0; padding: 0; list-style: none; > .productsList li < display: table; width: 100%; background-color: lightgreen; margin: 10px 0; padding: 0; border: 1px solid #CADFE4; > .productsList .productImage, .productsList .productDescription < display: table-cell; vertical-align: top; > .productsList .productImage background:red;> body> div >"container"> h2>Products list below ul >"productsList"> li> div >"productImage">IMG div >"productDescription"> h3>HEADING OF THE PRODUCT p>description of the product Related
- CSS styling of definition lists
- CSS styling of product list using divs
- CSS styling of product list using divs (Demo 2)
- CSS styling of product list using divs (Demo 3)
- CSS to style last-child in a List
- CSS Custom List style
- CSS Custom List style (Demo 2)
demo2s.com | Email: | Demo Source and Support. All rights reserved.