Merhaba ben landing page sitesi yapıyorum butona tıklanınca efekt li bir şekilde aşağı inmesini istiyorum nasıl yapabilirim? kodlarım bunlar index.html `<!DOCTYPE html>
<html>
<head>
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Orelega+One&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Freckle+Face&display=swap" rel="stylesheet">
<meta charset="utf-8">
<title>Deneme</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<a href="#">HOME</a>
<a href="#bant1">ABOUT</a>
<a href="#gor2">WORKS</a>
<a href="#bant2">PORTFOLİO</a>
<a href="#gor3">CONTACT</a>
<a href="#bant3">TRİAL</a>
</nav>
<div id="gor1" class="gorsel">
<div class="anasayfa anaYazı">
<h1>LOREM IPSUM 🙂</h1>
<p>Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet
Lorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit ametLorem ipsum dolor sit amet</p>
<span>GET MORE İNFO</span>
</div>
<div class="anasayfa anaFiltre"></div>
</div>
<div id="bant1" class="bant"></div>
<div id="gor2" class="gorsel"></div>
<div id="bant2" class="bant"></div>
<div id="gor3" class="gorsel"></div>
<div id="bant3" class="bant"></div>
</body>
</html>style.css
*{
margin: 0px;
padding: 0px;
}
body, html{
height: 100%;
}
nav{
position: absolute;
z-index: 3;
height: 100px;
width: 100%;
text-align: center;
line-height:100px;
}
nav a{
color: #FFF;
font-family: 'Orelega One', cursive;
text-decoration:none;
font-size: 25px;
margin-left: 15px;
padding: 12px 12px;
}
nav a:hover{
background-color: #000;
}
.gorsel{
height: 100%;
background-color: lightblue;
background-size: cover;
background-attachment: fixed;-
}
.bant{
height: 60%;
background-color: lightgreen;
}
#gor1{
background-image:url("arka plan/1.jpg");
}
#gor2{
background-image: url("arka plan/2.jpg");
}
#gor3{
background-image: url("arka plan/3.jpg");
}
.anasayfa{
position: absolute;
float: left;
}
.anaYazı{
color:#FFF;
width:100%;
height:100%;
z-index: 2;
text-align:center;
margin-top: 250px;
}
.anaFiltre{
width: 100%;
height: 100%;
opacity: 15%;
background-color: black;
z-index: 0;
}
.anaYazı h1{
font-family: 'Freckle Face', cursive;
font-size: 700;
color: orange;
}
.anaYazı p{
color:#FFF;
font-size: 25px;
font-family: 'Orelega One', cursive;
margin-bottom: 20px;
}
.anaYazı span{
font-family: 'Orelega One', cursive;
color: purple;
padding: 10px 10px;
background-color: orange;
font-size: 19px;
border: 1px solid orange;
border-radius: 5px;
}
.anaYazı span:hover{
background-color: #FFF;
color:orange;
cursor: pointer;
}`
Nasıl yapabilirim?