Membuat Animasi Back To Home dengan CSS

04/03/2018    Risman Hakim    311     Website

Membuat Animasi Back To Home dengan CSS - Back To Home pada halaman website merupakan suatu cara untuk memudahkan user kembali ke halaman awal web tanpa harus melakukan klik berulang - ulang pada tombol back browser. Sama halnya jika kalian pernah menemukan hal yang sama seperti back to top hanya saja yang membedakan adalah jika pada fungsi back to top kita tidak perlu menggulung scroll bar untuk kembali pada halaman teratas suatu web. Nah, kali ini saya akan bagikan tutorialnya mengenai bagaimana Membuat Animasi Back To Home dengan CSS.

Langkah 1 : Membuat Animasi Back To Home dengan CSS

Baiklah, langsung saja kita mulai praktekan cara membuat animasi back to homenya. Silahkan kalian buat file HTML kemudian ketikan struktur awal untuk animasi back to home.

<body>
    <a href="https://www.dumetschool.com" class="text">
      <div></div>
      <h4>Go Back...</h4>
      <span>Back to homepage</span>
    </a>
</body>

Langkah 2 : Membuat Animasi Back To Home dengan CSS

Selanjutya, kita akan ketikan sintak CSS untuk membuat animasi back to home, silahkan kalian sintak CSS berikut ini.

@import url('https://fonts.googleapis.com/css?family=Lobster');
body {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #F5F4FA;
  font-family: 'Lobster', cursive;
}

.text {
  position: relative;
  display: inline-block;
  text-decoration: none;
  padding: 10px 10px 10px 40px;
}

.text h4 {
  color: #4A4F6A;
  font-size: 16px;
  padding-top: 0px !important;
  padding-bottom: 0px !important;
  transform: translateY(8px);
}

.text span {
  opacity: 0;
  color: #858BA9;
  font-size: 12px;
  margin: -25px 0 0 1px;
  font-weight: 300;
  display: inline-block;
  transform: translateY(10px);
  transition:
    transform 500ms 0s cubic-bezier(0.2, 0, 0, 1),
    opacity 500ms 0s cubic-bezier(0.2, 0, 0, 1)
}

.text div {
  top: 30px;
  left: 0;
  content: '';
  width: 30px;
  height: 30px;
  display: block;
  overflow: hidden;
  position: absolute;
  border-radius: 50%;
  transform: scale(1);
  background-color: #E9E7F2;
}

.text div::after {
  content: '';
  width: 60px;
  height: 30px;
  position: absolute;
  background-image: url('https://s3-eu-west-1.amazonaws.com/thomascullen-codepen/back.svg');
  transition: transform 400ms 0s cubic-bezier(0.2, 0, 0, 1);
}

.text:hover h4 {
  color: #171922;
}

.text:hover h4,
.text:hover span {
  opacity: 1;
  transform: translateY(0);
}

.text:hover div {
  transform: scale(1.1);
  background-color: white;
  box-shadow:
    0 2px 10px 0 rgba(185,182,198,0.00),
    0 1px 3px 0 rgba(175,172,189,0.25);
}

.text:hover div::after {
  transform: translateX(-30px);
}

Setelah, kalian ketikan semua sintak HTML dan CSS, simpan filenya kemudian kalian coba buka pada browser masing - masing dan lihat hasilnya. Jika kalian coba arahkan kursor ke arah teks dan kalian klik, maka akan terjadi animasi dan membuka link baru atau bisa isikan link halaman home pada website.

Membuat Animasi Back To Home dengan CSS

Bagaimana, cukup mudah bukan untuk membuat animasi back to home nya ? silahkan kalian bisa modifikasi lagi tampilan nya agar terlihat lebih menarik. Cukup sekian tutorial Membuat Animasi Back To Home dengan CSS, semoga bermanfaat dan selamat mencoba :)

Artikel, Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More