Title:
CSS List Item Hover Effect
Created on:
October 27, 2022
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
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
Created on:
March 13, 2019
Made with:
HTML, CSS
Responsive:
Yes
Dependencies:
nan
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
Created on:
April 06, 2020
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Sass
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
Created on:
June 29, 2021
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
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:
Forbes Leaderboard
Created on:
June 18, 2020
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Sass
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:
DailyUI #019 - Leaderboard
Created on:
October 11, 2018
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Sass
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:
Gradient Ordered List
Created on:
May 15, 2019
Made with:
HTML, SCSS
Responsive:
Yes
Dependencies:
Sass
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:
To-Do Terrarium
Created on:
March 27, 2020
Made with:
HTML, SCSS, JavaScript
Responsive:
No
Dependencies:
Javascript
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:
List Item Hover Effect
Created on:
January 19, 2020
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
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)
Created on:
January 25, 2017
Made with:
HTML, SCSS, Javascript(Babel)
Responsive:
Yes
Dependencies:
Babel
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:
CSS List
Created on:
June 24, 2016
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
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:
To-Do List
Created on:
February 01, 2019
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Sass
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:
Pure CSS List
Created on:
October 22, 2020
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
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:
Vacation Todo List
Created on:
May 10, 2020
Made with:
HTML, SCSS, JavaScript
Responsive:
No
Dependencies:
Sass
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:
To-do List
Created on:
March 10, 2019
Made with:
HTML, SCSS, jQuery
Responsive:
No
Dependencies:
jQuery
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
Created on:
January 14, 2016
Made with:
HTML, CSS, JavaScript
Responsive:
yes
Dependencies:
nan
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
Created on:
November 20, 2017
Made with:
HTML, CSS(Less), JavaScript
Responsive:
No
Dependencies:
nan
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:
Custom CSS List Styles
Created on:
October 07, 2017
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
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:
Dropdown List Animation
Created on:
September 08, 2017
Made with:
HTML, CSS, jQuery
Responsive:
No
Dependencies:
JQuery
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:
Bootstrap Pricing Table
Created on:
March 16, 2016
Made with:
HTML, CSS(Bootstrap)
Responsive:
No
Dependencies:
Bootstrap
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
Created on:
March 04, 2017
Made with:
HTML, SCSS, javascript(Babel)
Responsive:
No
Dependencies:
Babel
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:
Todo List UI with VueJs
Created on:
December 24, 2017
Made with:
HTML, CSS, Vue.js
Responsive:
No
Dependencies:
Vue.js
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
Created on:
January 11, 2022
Made with:
HTML, SCSS, JavaScript
Responsive:
No
Dependencies:
Sass
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
Created on:
June 06, 2017
Made with:
HTML, CSS, JavaScript
Responsive:
No
Dependencies:
nan
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:
Scroll List Animation
Created on:
November 06, 2018
Made with:
HTML(Pug), SCSS, JS
Responsive:
No
Dependencies:
jQuery
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:
Todo List App With ES6
Created on:
November 16, 2019
Made with:
HTML, SCSS, JavaScript(ES6)
Responsive:
No
Dependencies:
nan
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
Created on:
June 03, 2020
Made with:
HTML, SCSS, Javascript
Responsive:
No
Dependencies:
nan
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
Created on:
August 03, 2017
Made with:
HTML, SCSS, jQuery
Responsive:
No
Dependencies:
jQuery
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.
Title:
Todo List
Created on:
December 04, 2017
Made with:
HTML, CSS
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautiful ordered list created with pure HTML and CSS. When you hover over the list item, you will see the transition from the right side. The block containing the list numbers is rotated by 20 degrees.
Title:
CSS Gradient Counter List
Created on:
March 07, 2019
Made with:
HTML(Pug), PostCSS
Responsive:
No
Dependencies:
PostCSS
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A gorgeous gradient counter list created with HTML (Pug), and PostCSS. When you scroll through the list, the gradient remains the same across all numbers. It has a custom scrollbar to match the gradient.
Title:
Local Storage To-Do List
Created on:
January 07, 2016
Made with:
HTML(Haml), SCSS, jQuery
Responsive:
No
Dependencies:
Sass, jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An enchanting local storage CSS to-do list built using HTML(Haml), SCSS, and jQuery. If you add an item to the list, it will add with a subtle fade-in animation. On clicking on the new list, it will erase the old list.
Title:
Drop-Down List Effect
Created on:
January 06, 2016
Made with:
HTML, CSS(Less), jQuery
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A multicolor delightful dropdown layout built using HTML, CSS(Less), and jQuery. On clicking on the dropdown box, the list of countries will appear with a sliding effect. When one selects a list item, the text box displays that selection.
Title:
React Cloudy ToDo List
Created on:
May 21, 2018
Made with:
HTML, CSS, React.js
Responsive:
No
Dependencies:
React.js
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An amazing cloudy to-do list created using HTML, CSS, and React.js. It will show infinite animation with air balloons and clouds. When you hover over a list item, the background will change with a pop-out effect.
Title:
Mtree JS
Created on:
June 29, 2014
Made with:
HTML, CSS(SCSS), Javascipt.
Responsive:
No
Dependencies:
jQuery
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A super useful and beautiful CSS list-style with smooth dropdown animations. Created using HTML, SCSS and Jquery. Very easy to customize and availabe in four different styles.
Title:
Css To Do List with Toggle Button
Created on:
February 01, 2019
Made with:
HTML, SCSS
Responsive:
Yes
Dependencies:
Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An elegant and stylish list of items with the toggle button gradient created using HTML and CSS. Also, the list has a shadow effect that gives a 3D look.
Title:
Cards - ListView
Created on:
September 13, 2018
Made with:
HTML, SCSS
Responsive:
No
Dependencies:
Sass
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
An enchanting and modern card list view created using pure HTML and SCSS. When you hover over the list item, it will highlight the list item with blue border color. You can add transition duration to make it smooth.
Title:
List UI
Created on:
May 08, 2018
Made with:
HTML(Pug), CSS(Stylus)
Responsive:
No
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A sophisticated ordered UI list created using HTML(Pug) and CSS(Stylus). When you hover over the list item, it will show the sliding effect on the text of the list item and show the list item number with a fade-in effect.
Title:
List Style Domain Favicon
Created on:
June 13, 2016
Made with:
HTML, CSS, JavaScript
Responsive:
yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A unique CSS list style created using HTML and JavaScript. It can fetch site favicons and list them alongside their names.
Title:
CSS List
Created on:
October 07, 2018
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
Simple yet very useful CSS list style with color-changing hover effect on list items. It also comes with a search bar for easy navigation.
Title:
Big Numbers Ordered List
Created on:
June 28, 2012
Made with:
HTML, CSS
Responsive:
yes
Dependencies:
nan
Compatible browsers:
Opera, Brave, Firefox, Google Chrome, Edge
Code description:
A beautifully designed and numbered simple ordered list, created using pure HTML and CSS.
