HTML and CSS list templates are a great way to quickly create a visually appealing and functional website. In this article, we prepared samples of HTML list templates with CSS. These lists can be useful to display menu items too.
It is a powerful tool for web designers, as it allows them to create complex layouts and designs with relative ease. CSS list templates are used to create a consistent look and feel across a website, while still allowing for customization.
With CSS you can make stylish and beautiful lists by combining HTML and CSS code snippets. The following examples contain HTML list CSS examples. Some of them have JavaScript codes to add more extra advanced beautiful effects.
If you wonder how to make an HTML list look good? See the following hand-pick examples that you can use on the web pages of your website.
HTML CSS List Template & Effects
Effect #1
In this example, if you go on items, the item will move to the right.
- Honar Systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
<ul class="item1">
<li>Honar Systems</li>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
ul {
list-style-type: none;
width: 200px; height: auto;
}
ul li {
padding: 10px 0;
border-bottom: 1px solid #add8e6;
text-align: left;
transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear;
-webkit-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear;
-moz-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear;
-o-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear;
-ms-transition: padding-left 0.3s linear, font-weight 0.2s linear, color 0.3s linear;
}
ul li:first-child {
border-top: 1px solid #909;
} ul li:hover {
padding-left: 20px;
font-weight: 600;
color: #add8e6;
}
List Effect #2
Display items from left to right when you scroll to view the list.

Add the below link inside your <head>
tag.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<ul class="item2">
<li><a href="https://www.honarsystems.com/">Honar Systems</a></li>
<li><a href="#">HTML Tutorial</a></li>
<li><a href="#">CSS Tutorial</a></li>
<li><a href="#">JavaScript Tutorial</a></li>
</ul>
ul.item2{
list-style: none;
}
ul.item2 li{
opacity: 0;
left: -100%;
}
ul.item2 li a{
text-decoration: none;
padding: 5px 15px;
margin: 1px 0;
display: inline-block;
background: #909;
color: #fff;
}
ul.item2-after li{
opacity: 1;
left: 0;
}
(function($){
var defaults = {
duration: 0.5,
pause: 0.5,
delaybeforestart: 'onvisible',
postclass: 'animated-after'
};
function css3propmap(){
var vendorprefixes = ['-ms-', '-o-', '-moz-', '-webkit-'], propmap = {};
for (var i=0; i 0 && (range[0]-field[0]) <= fieldspan )
return true;
else{
if ( (range[0]-field[0]) < 0 && (range[0]+rangespan) >= field[0] )
return true;
}
return false;
}
if (Array.filter && !$(window).data('scrollbind')){
var $window = $(window);
$window.bind('scroll.scrollbind', function(){
var scrolltop = $window.scrollTop(), animatedlists = $.animatedlists;
animatedlists = animatedlists.filter(function(el, index){
return (!el.shownflag && inrange([el.offsettop, el.offsettop+el.ulheight], [scrolltop, scrolltop+$window.height()]));
});
for (var i=0; i < animatedlists.length; i++){
animatedlists[i].$ul.addClass(animatedlists[i].postclass);
animatedlists[i].shownflag = true;
}
});
$window.bind('load', function(){
var animatedlists = $.animatedlists;
for (var i=0; i < animatedlists.length; i++){
animatedlists[i].offsettop = animatedlists[i].$ul.offset().top;
animatedlists[i].ulheight = animatedlists[i].$ul.outerHeight();
}
$window.trigger('scroll.scrollbind');
});
$(window).data('scrollbind', true);
}
return this.each(function(){
var $ul = $(this).css({overflow:'hidden'});
var o = $.extend({}, defaults, options);
var $lis = $ul.children('li').css({position:'relative'});
$lis.each(function(i){
$(this).css(css3propmap(['transition', 'all ' + o.duration + 's ease-in-out ' + i * (o.pause) + 's']));
});
if (typeof o.delaybeforestart == "number"){
setTimeout(function(){$ul.addClass(o.postclass)}, o.delaybeforestart * 1000);
}
else if (o.delaybeforestart == "onvisible" && Array.filter){
var offsettop = $ul.offset().top;
$.animatedlists.push({$ul:$ul, offsettop:offsettop, ulheight:$ul.outerHeight(), shownflag:false, postclass:o.postclass});
}
else{
$ul.addClass(o.postclass);
}
})
}
})(jQuery);
jQuery(function($){
$('ul.item2').animatelist({pause: 1, postclass: 'item2-after'});
});
List Effect #3
Display list items from bottom to top effect.

<ul class="item3">
<li>Honar Systems</li>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
ul.item3 {
width: 300px;
}
ul.item3 li {
position: relative;
display: block;
border: 1px solid #909;
margin-bottom: 5px;
padding: 10px;
text-align: center;
text-transform: uppercase;
animation: fadeIn 0.5s linear;
animation-fill-mode: both;
}
ul.item3 li:nth-child(1) {
animation-delay: 0.25s;
}
ul.item3 li:nth-child(2) {
animation-delay: 0.5s;
}
ul.item3 li:nth-child(3) {
animation-delay: 0.75s;
}
ul.item3 li:nth-child(4) {
animation-delay: 1s;
}
@-webkit-keyframes fadeIn {
0% {
opacity: 0;
top: 100px;
}
75% {
opacity: 0.5;
top: 0px;
}
100% {
opacity: 1;
}
}
List Effect #4
Background color changes when the mouse hover.
- Honar Systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
<ul class="item4">
<li>Honar Systems</li>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
ul.item4 {
list-style: none;
padding: 0;
margin: 0
}
ul.item4 li {
width: 300px;
display: block;
padding: 20px;
background: linear-gradient(to right, rgba(153, 0, 153, .2) 50%, #909 0);
color: #333;
margin: 1px 0;
text-decoration: none;
background-size: 200%;
background-position: 0;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
}
ul.item4 li:hover {
color: #fff;
background-position: -100%;
}
ul.item4 {
list-style: none;
padding: 0;
margin: 0
}
ul.item4 li {
width: 300px;
display: block;
padding: 20px;
background: linear-gradient(to left, #909 50%, rgba(153, 0, 153, .2) 0);
color: #333;
margin: 1px 0;
text-decoration: none;
background-size: 200%;
background-position: 0;
transition: all .2s ease;
-webkit-transition: all .2s ease;
-moz-transition: all .2s ease;
-o-transition: all .2s ease;
text-align: right;
}
ul.item4 li:hover {
color: #fff;
background-position: 100%;
}
List Effect #5
- Honar Systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
<ul class="item5">
<li>Honar Systems</li>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
.item5{
list-style: none;
width: 300px;
}
.item5 li{
padding: 5px;
margin: 1px 0;
}
.item5 li:hover {
color: #909;
}
.item5 li:after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #909;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.item5 li:hover:after {
content: "";
display: block;
height: 3px;
width: 100%;
background-color: #909;
}
List Effect #5
In this example in hover, the bottom border of the item will be grown.
- Honar Systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
<ul class="item5">
<li>Honar Systems</li>
<li>HTML Tutorial</li>
<li>CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
.item5{
list-style: none;
width: 300px;
}
.item5 li{
padding: 5px;
margin: 1px 0;
}
.item5 li:hover {
color: #909;
}
.item5 li:after {
content: "";
display: block;
height: 3px;
width: 0;
background-color: #909;
transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
}
.item5 li:hover:after {
content: "";
display: block;
height: 3px;
width: 100%;
background-color: #909;
}
List Effect #6
The item vibrates when the mouse hovers.
ul class="item6">
<li >Honar systems</li>
<li >HTML Tutorial</li>
<li >CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
body {
background:#f4bee7;
display: grid;
place-items: center;
}
ul li:hover{
animation: wiggle 3s linear infinite;
}
/* Keyframes */
@keyframes wiggle {
0%, 7% {
transform: rotateZ(0);
}
15% {
transform: rotateZ(-10deg);
}
20% {
transform: rotateZ(10deg);
}
25% {
transform: rotateZ(-10deg);
}
30% {
transform: rotateZ(10deg);
}
35% {
transform: rotateZ(-10deg);
}
40%, 100% {
transform: rotateZ(0);
}
}
ul li{
width:150px;
text-align: center;
background-color: rgb(253, 6, 80);
color: white;
margin-top: 40px;
padding: 10px;
list-style-type: none;
}
- Honar systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
List Effect #7
In this example in hover, the item will be grown, and the background color will change.
<ul class="item7">
<li >Honar systems</li>
<li >HTML Tutorial</li>
<li >CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
body{
background-color: #a6fbff;
}
ul li:hover{
animation-name: my-animation;
animation-duration: 0.3s;
animation-direction: alternate;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}
ul li{
width:140px;
background-color: #4535f4;
color: white;
margin-top: 40px;
padding: 10px;
list-style-type: none;
}
@keyframes my-animation {
from {
background-color: #4535f4;
width: 140px;
top: 10px;
}
to {
background-color: #aaccef;
width: 200px;
top: 100px;
}
}
- Honar systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
List Effect #8
In this example, the character next to the items becomes bigger and smaller.
<ul class="item8">
<li >Honar systems</li>
<li >HTML Tutorial</li>
<li >CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
@import url("https://fonts.googleapis.com/css2?family=Rubik+Moonrocks&display=swap");
body {
height: 100vh;
margin: 0;
display: grid;
place-items: center;
font: calc(1rem + 4vmin) "Rubik Moonrocks";
}
ul {
list-style: none;
}
ul > li {
&::before {
content: "🌑";
transform: scale(0.2);
display: inline-block;
animation: pulse infinite alternate 0.9s;
}
@for $i from 1 through 10 {
&:nth-child(#{$i}) {
&::before {
animation-delay: -#{$i / 5}s;
}
}
}
}
@keyframes pulse {
to {
transform: scale(0.69);
}
}
- Honar systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
List Effect #9
The color of the character changes when the mouse hover.
<ul class="item9">
<li class="one">Honar systems</li>
<li class="two">HTML Tutorial</li>
<li class="three">CSS Tutorial</li>
<li class="four">JavaScript Tutorial</li>
</ul>
body {
background:#37bfe1;
padding:50px;
}
li {
color:#fff;
list-style:none;
position: relative;
padding-left:50px;
line-height: 2;
font-size:32px;
}
li:before {
font-family:FontAwesome;
position: absolute;
left: 0;
color:#318ca0;
font-size:32px;
}
li.one:before {
content:"\2660";
}
li.two:before {
content:"\2663";
}
li.three:before {
content:"\2665";
}
li.four:before {
content:"\2666";
}
li:hover:before {
color:#333;
}
- Honar systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
List Effect #10
In this example, if you hover over the items, the item will enlarge and move to the right.
<ul class="item10">
<li >Honar systems</li>
<li >HTML Tutorial</li>
<li >CSS Tutorial</li>
<li>JavaScript Tutorial</li>
</ul>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: cornsilk;
}
ul {
padding: 0;
list-style-type: none;
}
ul li {
box-sizing: border-box;
width: 15em;
height: 3em;
font-size: 20px;
border-radius: 0.5em;
margin: 0.5em;
box-shadow: 0 0 1em rgba(0,0,0,0.2);
color: white;
font-family: sans-serif;
text-transform: capitalize;
line-height: 3em;
transition: 0.3s;
cursor: pointer;
}
ul li:nth-child(odd) {
background: linear-gradient(to right, orange, tomato);
text-align: left;
padding-left: 10%;
transform: perspective(500px) rotateY(45deg);
}
ul li:nth-child(even) {
background: linear-gradient(to left, orange, tomato);
text-align: right;
padding-right: 10%;
transform: perspective(500px) rotateY(-45deg);
}
ul li:nth-child(odd):hover {
transform: perspective(200px) rotateY(45deg);
padding-left: 5%;
}
ul li:nth-child(even):hover {
transform: perspective(200px) rotateY(-45deg);
padding-right: 5%;
}
- Honar systems
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial