Pastel Button

---

Tutorial Blog: Cara Membuat Hover Effect with Pseudo-element

Masuk Blogger: Tema > Edit HTML

Tambahkan kode CSS berikut ini sebelum kode ]]></b:skin> atau </style>

.cont {
  display: flex;
  align-items: center;
  justify-content: center;
}

.slide {
  width: 150px;
  height: 40px;
  display: inline-block;
  font-size: 15px;
  line-height: 40px;
  text-align: center;
  letter-spacing: 5px;
  color: #FFF;
  background-color: #90E0F3;
  border-radius: 10px;
  overflow: hidden;
  transition: all .2s ease-in-out;
  text-transform: uppercase;
}

.slide:hover {
  color: #FFF;
  background-color: #B8B3E9;
  transition: background-color 2s ease-out;
}

.first, .second {
  padding-left: 5px;
  display: block;
  transition: all 420ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.slide:hover .first {
  margin-top: -38px;
}

.box {
  width: 200px;
  height: 200px;
  background: #CCC;
}

.box:hover {
  /*   background: linear-gradient(80deg, #90E0F3, #B8B3E9); */
  background-color: #B8B3E9;
  -webkit-transition: background-color 2s ease-out;
  -moz-transition: background-color 2s ease-out;
  -o-transition: background-color 2s ease-out;
  transition: background-color 2s ease-out;
}

Simpan Tema

Untuk menampilkan hasilnya, tambahkan kode HTML berikut ini pada postingan bagian Compose HTML

<div class="cont">
<a href='#url' class="slide"><div class="first">
Download</div>
<div class="second">
25MB </div>
</a></div>

CSS .cont

justify-content center posisi tombol tengah

justify-content flex-end posisi tombol kanan

justify-content none posisi tombol default (kiri)