How to Create a Responsive and Animated Website Footer with HTML & CSS

A well-designed footer can enhance the overall user experience and improve the aesthetics of a website. In this beginner-friendly tutorial, you’ll learn how to create a responsive and animated website footer using only HTML and CSS.

This tutorial is perfect for those looking to add a modern, interactive footer to their web projects. Follow along to get the source code and download the photo used in the video.

Why Add a Responsive and Animated Footer?

Professional Appeal: A stylish footer makes your website look polished and complete.
Enhanced User Experience: A responsive footer adapts seamlessly to all devices.
Interactive Design: Subtle animations can make your footer more engaging.

What You'll Learn

Structuring the footer using semantic HTML.
Styling with modern CSS for a clean, responsive design.
Adding animations for smooth hover effects.

Download the Photo Used in the Tutorial

Click here to download the image

Source Code

HTML Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
   <footer>
      <div class="waves">
         <div class="wave" id="wave1"></div>
         <div class="wave" id="wave2"></div>
         <div class="wave" id="wave3"></div>
         <div class="wave" id="wave4"></div>
      </div>
      <ul class="social-icon">
         <li class="social-icon_item"><a href="#" class="social-icon_link">
            <ion-icon name="logo-facebook"></ion-icon>
         </a></li>
         <li class="social-icon_item"><a href="#" class="social-icon_link">
            <ion-icon name="logo-twitter"></ion-icon>
         </a></li>
         <li class="social-icon_item"><a href="#" class="social-icon_link">
            <ion-icon name="logo-linkedin"></ion-icon>
         </a></li>
         <li class="social-icon_item"><a href="#" class="social-icon_link">
            <ion-icon name="logo-instagram"></ion-icon>
         </a></li>
      </ul>
      <ul class="menu">
         <li class="menu_item"><a href="#" class="menu_link">Home</a></li>
         <li class="menu_item"><a href="#" class="menu_link">About</a></li>
         <li class="menu_item"><a href="#" class="menu_link">Services</a></li>
         <li class="menu_item"><a href="#" class="menu_link">Team</a></li>
         <li class="menu_item"><a href="#" class="menu_link">Contact</a></li>
      </ul>
      <p>&copy;2025 Code by @Mirox | All Rights Reserved</p>
   </footer>


    <script
      type="module"
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"
    ></script>
  </body>
</html>

CSS Code

*{
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: sans-serif;
}
body{
   display: flex;
   background: #333;
   justify-content: flex-end;
   align-items: flex-end;
   min-height: 100vh;
}
footer{
   position: relative;
   width: 100%;
   background: #3586ff;
   min-height: 100px;
   padding: 20px 50px;
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
}
.social-icon,.menu{
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   margin: 10px 0;
   flex-wrap: wrap;
}
.menu_item, .social-icon_item{
   list-style: none;
}
.social-icon_link{
   font-size: 2rem;
   color: #fff;
   margin: 0 10px;
   display: inline-block;
   transition: 0.5s;
}
.social-icon_link:hover{
   transform: translateY(-10px);
}
.menu_link{
   font-size: 1.2rem;
   color: #fff;
   margin: 0 10px;
   display: inline-block;
   transition: 0.5s;
   text-decoration: none;
   opacity: 0.75;
   font-weight: 400;
}
.menu_link:hover{
   opacity: 1;
}
.footer p{
   color: #fff;
   margin: 15px 0 10px 0;
   font-size: 1rem;
   font-weight: 400;
}
.wave{
   position: absolute;
   top: -100px;
   left: 0;
   width: 100%;
   height: 100px;
   background: url(wave.png);
   background-size: 1000px 100px;
}
.wave#wave1{
   z-index: 1000;
   opacity: 1;
   bottom: 0;
   animation: animatewave 4s linear infinite;
}
.wave#wave2{
   z-index: 900;
   opacity: 0.5;
   bottom: 10px;
   animation: animate 4s linear infinite;
}
.wave#wave3{
   z-index: 999;
   opacity: 0.7;
   bottom: 15px;
   animation: animatewave 3s linear infinite;
}
.wave#wave4{
   z-index: 999;
   opacity: 0.7;
   bottom: 20px;
   animation: animate 3s linear infinite;
}
@keyframes animatewave {
   0%{
      background-position-x: 1000px;
   }
   100%{
      background-position-x: 0px;
   }
}
@keyframes animate {
   0%{
      background-position-x: -1000px;
   }
   100%{
      background-position-x: 0px;
   }
}

Final Words

This responsive and animated footer is an excellent addition to any website, whether it’s a portfolio, business site, or blog. It’s easy to create, fully customizable and enhances the user experience.

Watch the video tutorial for a step-by-step guide and use the provided source code and image to bring your footer to life.

Keywords: Responsive footer, animated footer, HTML and CSS footer tutorial, beginner-friendly website design, modern footer design.

Edit This Article

Mirox Dev

How to Create a Responsive and Animated Website Footer with HTML & CSS