Scroll Down Button Using HTML & CSS

Hello everyone. Welcome to today’s tutorial on Codewithrandom. We’ll learn how to make a Scroll down button. In Today’s session, We will use HTML & CSS to complete this Project.

The HTML (Hypertext Markup Language) Code will make the structure of the project. The CSS (Cascading Stylesheet) code will provide the styling and coloring to it and will contribute as the main source to conclude this project.

We’ll show you the Scroll Down Button Using HTML & CSS with complete source code available for you so you just copy and paste it into your project.

I hope you have got an idea about the project.

HTML Code for Scroll Down Button

<section id="sec-1">
  <div class="container">
    <h1>Hello Guys</h1>
    <a href="#sec-2">
      <div class="scroll-down"></div>
    </a>
  </div>
</section>
<section id="sec-2">
  <div class="container">
    <h1>Welcome to Codewithrandom</h1>
  </div>
</section>

In this HTML code, we have defined the full structure for the scroll-down button in which we have defined an arrow and some sections. Let us code the CSS part to understand the part of styling.

How to Create a Custom Right-Click Menu Using JavaScript

CSS Code for Scroll Down Button

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  font-size: 40px;
  font-family: "Montserrat";
  scroll-behavior: smooth;
}
section {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
#sec-1 {
  background-color: indigo;
}
#sec-2 {
  background-color: red;
}
.scroll-down {
  height: 50px;
  width: 30px;
  border: 2px solid black;
  position: absolute;
  left: 50%;
  bottom: 20px;
  border-radius: 50px;
  cursor: pointer;
}
.scroll-down::before,
.scroll-down::after {
  content: "";
  position: absolute;
  top: 20%;
  left: 50%;
  height: 10px;
  width: 10px;
  transform: translate(-50%, -100%) rotate(45deg);
  border: 2px solid black;
  border-top: transparent;
  border-left: transparent;
  animation: scroll-down 1s ease-in-out infinite;
}
.scroll-down::before {
  top: 30%;
  animation-delay: 0.3s;
  /* animation: scroll-down 1s ease-in-out infinite; */
}

@keyframes scroll-down {
  0% {
    /* top:20%; */
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  60% {
    opacity: 1;
  }
  100% {
    top: 90%;
    opacity: 0;
  }
}

In this CSS code, we have styled the project. we have given the color to the sections and aligned them in a proper way. Then we added an animation on the scroll-down button and defined the height, width & margin. Let us see the final output of the project Scroll Down Button using HTML & CSS (Source Code) | HTML Button to Scroll Down.

Final Output Scroll Down Button Using HTML & CSS

We have successfully created our Scroll Down Button Using HTML & CSS. You can use this project for your personal needs and the respective lines of code are given with the code pen link mentioned above.

50+ Html ,Css & Javascript Projects With Source Code

If you find out this Blog helpful, then make sure to search code random on google for Front End Projects with Source codes and make sure to Follow the Code with Random Instagram page.

Thank You And Keep Learning!!!

Written By – Harsh Sawant

Code By – @harshh9