Scroll down button 01

<!DOCTYPE html>
<html>
<head>
  <title>SCROLL DOWN CSS | Par NGLESSON</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="keyword" content="SCROLL DOWN CSS ">
	<meta name="author" content="Mezgani said">
	<meta name="copyright" content="NGLESSON">
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
  <div class="container-fluid">
    <div class="row">
      <section>
        <p>SCROLL DOWN CSS</p>
        <a href="#" class="scroll-down" address="true"></a>
        </section>
        <section class="ok">
        <p>OK SCROLL !</p>
        </section>
    </div>
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
  <script src="script.js"></script>
</body>
</html>
body {
  background-color: #000;
}

*,
:after,
:before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

section {
  height: 100vh;
  width: 100%;
  display: table;
  
}
section.ok{
  background-color: #555;
}

p{
  color: white;
  font-family: arial;
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

.scroll-down {
  opacity: 1;
  -webkit-transition: all .5s ease-in 3s;
  transition: all .5s ease-in 3s;
}

.scroll-down {
  position: absolute;
  bottom: 30px;
  left: 50%;
  margin-left: -16px;
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #FFF;
  background-size: 14px auto;
  border-radius: 50%;
  z-index: 2;
  -webkit-animation: bounce 2s infinite 2s;
  animation: bounce 2s infinite 2s;
  -webkit-transition: all .2s ease-in;
  transition: all .2s ease-in;
  transform: scale(1)
}

.scroll-down:before {
    position: absolute;
    top: calc(50% - 8px);
    left: calc(50% - 6px);
    transform: rotate(-45deg);
    display: block;
    width: 12px;
    height: 12px;
    content: "";
    border: 2px solid white;
    border-width: 0px 0 2px 2px;
}

@keyframes bounce {
  0%,
  100%,
  20%,
  50%,
  80% {
    -webkit-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
  }
  40% {
    -webkit-transform: translateY(-10px);
    -ms-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  60% {
    -webkit-transform: translateY(-5px);
    -ms-transform: translateY(-5px);
    transform: translateY(-5px);
  }
}
$(function() {
    $('.scroll-down').click (function() {
      $('html, body').animate({scrollTop: $('section.ok').offset().top }, 'slow');
      return false;
    });
});
bootstrap4 tabs

bootstrap4 tabs

Timeline style08

Timeline style08

Timeline style02

Timeline style02

Table Responsive with css 01

Table Responsive with css 01

Input range slider HTML style03

Input range slider HTML style03

Image hover Flip Flap Style

Image hover Flip Flap Style

Créer une input search animée

Créer une input search animée

Créer un effet de défilement vers le bas de la souris animé

Créer un effet de défilement vers le bas de la souris animé

Carousel 8 bloc with B4

Carousel 8 bloc with B4

Card Profile Style01

Card Profile Style01

Calculer la some des colones avec jquery

Calculer la some des colones avec jquery

Bootstrap3 Sidebar CSS

Bootstrap3 Sidebar CSS