<div class="center">
  <a class="btn btn-full js--scroll-to-blue" href="#">I'm hungry</a>
  <a class="btn btn-ghost js--scroll-to-pink" href="#">Show me more</a>
</div>

<hr>

<section class="section-jeda">
  <div class="test-0"></div>
</section>

<hr>

<section class="section-one js--section-one">
  <div class="test-1">
    <p>Section 1</p>
  </div>
</section>

<hr>

<section class="section-jeda">
  <div class="test-0"></div>
</section>

<hr>

<section class="section-two js--section-two">
  <div class="test-2">
    <p>Section 2</p>
  </div>
</section>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
/* ---------- GLOBAL ---------- */
.center {
  display: flex;
  justify-content: center;
}

.test-0, .test-1, .test-2 {
  height: 50vw;
}

.test-0 {
  background-color: lightgrey;
}

.test-1 {
  background-color: lightblue;
}

.test-2 {
  background-color: lightpink;
}

/* ---------- LINKS ---------- */
a:link,
a:visited {
  color: #e67e22;
  text-decoration: none;
  padding-bottom: 1px;
  border-bottom: 1px solid #e67e22;
  transition: border-bottom 0.2s, color 0.2s;
}

a:hover,
a:active {
  color: #555;
  border-bottom: 1px solid transparent;
}

/* ---------- BUTTONS ---------- */
.btn:link,
.btn:visited,
input[type="submit"] {
  display: inline-block;
  padding: 10px 30px;
  font-weight: 300;
  text-decoration: none;
  border-radius: 200px;
  transition: background-color 0.2s, border 0.2s, color 0.2s;
}

.btn-full:link,
.btn-full:visited,
input[type="submit"] {
  background-color: #e67e22;
  border: 1px solid #e67e22;
  color: #fff;
  margin-right: 15px;
}

.btn-ghost:link,
.btn-ghost:visited {
  border: 1px solid #e67e22;
  color: #e67e22;
}

.btn:hover,
.btn:active,
input[type="submit"]:hover,
input[type="submit"]:active {
  background-color: #cf6d17;
}

.btn-full:hover,
.btn-full:active {
  border: 1px solid #cf6d17;
}

.btn-ghost:hover,
.btn-ghost:active {
  border: 1px solid #cf6d17;
  color: #fff;
}

/* ---------- OTHER ---------- */
$(document).ready(function () {
  
/* Scroll on buttons */
  $(".js--scroll-to-blue").click(function () {
    $("html, body").animate(
      { scrollTop: $(".js--section-one").offset().top },
      1000
    );
  });

  $(".js--scroll-to-pink").click(function () {
    $("html, body").animate(
      { scrollTop: $(".js--section-two").offset().top },
      1000
    );
  });
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.