Useful Sample HTML CSS List Template

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

HTML CSS

<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.

html list effect with css and javascript - honarsystems

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>

HTML CSS JS

<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.

HTML CSS

<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

HTML CSS Right To Left CSS

<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

HTML CSS

<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

HTML CSS

<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.

HTML CSS

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.

HTML CSS

<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.

HTML CSS

<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.

HTML CSS

<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.

HTML CSS

<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

HTML CSS List Template & Effects

Effect #1

List Effect #2

List Effect #3

List Effect #4

List Effect #5

List Effect #5

List Effect #6

List Effect #7

List Effect #8

List Effect #9

List Effect #10

Related Posts