Hey everyone. Welcome to Coding Artist. Today we will learn how to create a scroll down button. To create this button we need only HTML and CSS.
The scroll down button consists of an animation that indicates the user to scroll down to a new section. Clicking on the button takes the user to the next section of the page. This is not limited only to the section. This button can be used to scroll to any section of the page.
We usually use the scroll down button on hero sections. But we can use it on any section of our page. Also, If you are looking for a tutorial on the scroll to top button, you can check out this tutorial here.
Video Tutorial:
If you prefer to learn by watching a video tutorial, you should check out the video version of this tutorial here. And do subscribe to my youtube channel where I post web development related tips, tricks and tutorials.
Project Folder Structure:
Before we even start coding, we need to create a project folder structure. To do that we create a folder called ‘Scroll Down Button’. Within this folder, we have two files. The first file is the HTML document. We name this file index.html. The next one is the stylesheet which we name style.css. We can now begin to code.
HTML:
The HTML section consists of two section elements. We assign each of them a unique id. The first section consists of an anchor tag. The ‘href’ attribute of this is set to the id of section-2. Also, we assign ‘scroll-btn’ id to the anchor tag.
The text/content of section-2 is just for demo purposes. You can use any kind of element in this section.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Scroll Down Button</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<section id="section-1">
<a id="scroll-btn" href="#section-2"></a>
</section>
<section id="section-2">
<h1>HELLO THERE</h1>
<h2>WELCOME TO CODING ARTIST</h2>
</section>
</body>
</html>
CSS:
Now let us style our sections and button using CSS. Do copy the code below and paste it into your stylesheet.
We don’t have to do much in CSS since we have already added the functionality using HTML. We start by discarding the margins and paddings of all the elements.
Next, we set the scroll behaviour of the document to smooth. Please note that this is a crucial step. Without this, there would be no transition to the next section.We use the anchor tag along with its before pseudo-element to create the scroll down shape. And to add the animation we use the animation property along with keyframes.
We use the after pseudo-element of the anchor tag to insert the ‘Scroll Down’ text.
To make this code responsive we use media queries with its breakpoint set at a max-width of 500px.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
html {
scroll-behavior: smooth;
}
section {
height: 100vh;
position: relative;
}
#section-1 {
background-color: #2d8df8;
}
a#scroll-btn {
position: absolute;
height: 10em;
width: 6.25em;
border: 0.5em solid #ffffff;
margin: auto;
left: 0;
right: 0;
bottom: 6.25em;
border-radius: 3em;
}
a#scroll-btn:before {
position: absolute;
content: "";
margin: auto;
left: 0;
right: 0;
top: 1.2em;
height: 1.2em;
width: 1.2em;
background-color: #ffffff;
border-radius: 50%;
animation: move-down 2s infinite;
}
@keyframes move-down {
80% {
opacity: 0.5;
}
100% {
transform: translateY(5.3em);
opacity: 0;
}
}
a#scroll-btn:after {
position: absolute;
content: "SCROLL DOWN";
width: 12em;
display: block;
width: 12em;
text-align: center;
left: -4.2em;
bottom: -2.5em;
font-size: 1.6em;
color: #ffffff;
letter-spacing: 3px;
font-weight: 600;
}
#section-2 {
background-color: #111315;
color: #ffffff;
font-size: 2.7em;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
}
@media screen and (max-width: 500px) {
a#scroll-btn {
font-size: 12px;
}
}
We have successfully built the scroll down button. If you have any issues while creating this code you can download the source code by clicking on the download button below. Also, I would like to hear from you. If you have any queries, suggestions or feedback then comment them below.
Happy Coding!
hy provide my access of class of html,css and javascript