How to add an animated scroll down button using Html/Css?

user_16759146 0
Viewed 211

I'm trying to make a smooth scrolling program, and it works, but I want a kinda animated button to it.

Here's my code:

html {
  scroll-behavior: smooth;
}

#section1 {
  height: 800px;
  background-color: red;
}

#section2 {
  height: 800px;
  background-color: blue;
}
<h1>Smooth Scroll</h1>

<div class="main" id="section1">
  <h1>Section 1</h1>
  <a href="#section2">Section 2 </a>
</div>

<div class="main" id="section2">
  <h1>Section 2</h1>
  <a href="#section1">Section 1</a>
</div>

I want something like this -

The image

Is there any way to do this using only HTML and CSS?

css-animations css html
2 Answers

So first of all, I turned this:

<a href="#section2">Section 2 </a>

And turned it into this:

<div class="scrollButton">
   <p class="scrollIcon">></p>
   <a href="#section2">Section 2 </a>
</div>

Then I created the icon (it's a rotated > with transform: rotate(90deg);) and placed the text under it. Then I animated the button using CSS keyframes

You can also use a normal icon but don't forget to remove the transform: rotate(90deg);.

Here is the code:

<!DOCTYPE html>

<html>
    <head>
        <style>
            /* Styles needed */

            html {
                scroll-behavior: smooth;
            }
            
            a {
              color: #fff;
              text-decoration: none;
            }

            #section1 {
            height: 800px;
            background-color: red;
            }

            #section2 {
            height: 800px;
            background-color: blue;
            }
            
            .scrollButton {
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;            
            }
            
            .scrollIcon {
              transform: rotate(90deg);
              display: inline-block;
              position: relative;
              animation: 2.5s scrollIcon infinite;
              color: #fff;
            }
            
            @keyframes scrollIcon {
              0% {
                opacity: 0;
                top: 0; 
              } 
              50% {
                opacity: 1;
              }
              100% {
                opacity: 0;
                top: 15px;
              }
            }
            
        </style>        
    </head>

    <body>
        <h1>Smooth Scroll</h1>

        <div class="main" id="section1">
          <h1>Section 1</h1>
          
          <div class="scrollButton">
            <p class="scrollIcon">></p>
            <a href="#section2">Section 2 </a>
          </div>
          
        </div>
        
        <div class="main" id="section2">
          <h1>Section 2</h1> 
          <div class="scrollButton">
            <p class="scrollIcon">></p>
            <a href="#section1">Section 2 </a>
          </div>
        </div>
    </body>
</html>

user_143602270

Yes, it is possible to do this with CSS using animations and pseudo-elements.

button {
  cursor: pointer;
  background: blue;
  color: white;
  border: none;
  font-size: 18pt;
  padding: 16pt 16pt 8pt;
  position: relative;
}

button::after {
  content: '';
  width: 8pt;
  height: 8pt;
  position: absolute;
  top: 0;
  left: calc(50% - 4pt);
  z-index: 1;
  border-width: 0 0 1pt 1pt;
  border-style: solid;
  border-color: white;
  transform: rotate(-45deg);
  animation: arrowAnimation 1s infinite;
}

@keyframes arrowAnimation {
  0% { top: 0; }
  100% { top: 8pt; }
}
<button type="button">Scroll</button>

user_10289490
Related