Cara Membuat Link Tombol Langsung Telepon Otomatis Di Blog

---

Bagi Anda yang memiliki blog terutama yang menawarkan produk dan jasa, memiliki kemampuan untuk menjalin koneksi cepat dengan calon pelanggan atau pembeli adalah kunci utama untuk mencapai kesuksesan.

Salah satu cara untuk memastikan calon pelanggan atau pembeli dapat terhubung dengan Anda dengan mudah dan cepat adalah melalui penggunaan fitur HTML dalam bentuk anchor tag hyperlink telepon yang dapat digunakan sebagai tombol telepon otomatis.

Tombol telepon otomatis memungkinkan pengunjung blog Anda untuk terhubung langsung dengan customer care atau berbicara secara langsung dengan Anda sebagai pemilik blog.

Apa itu Anchor Tag Hyperlink Telepon

Anchor tag hyperlink telepon adalah cara khusus dalam HTML untuk membuat tautan yang, ketika diklik, akan membuka aplikasi telepon pada perangkat pengguna, memungkinkan mereka untuk menghubungi nomor telepon tertentu dengan cepat. Untuk menciptakan tautan telepon, Anda menggunakan atribut "href" dengan skema "tel:" dalam tag anchor (a). Contoh penggunaan dasar anchor tag hyperlink telepon dalam HTML sebagai berikut.

Dalam Bentuk Anchor Tag HTML :

<a href="tel:+62234567890">Hubungi kami di +62 (234) 567-890</a>

Contoh Hasil Penerapan :

Hubungi kami di +62 (234) 567-890

Dalam Bentuk Button Tag HTML :

<button onclick="window.open('tel:+62234567890','_self')" title="+62 (234) 567-890">Hubungi Kami !</button>

Contoh Hasil Penerapan :

Mengapa Tombol Telepon Otomatis Penting?

Tombol telepon otomatis adalah alat yang dapat menghubungkan pengunjung blog Anda langsung dengan tim customer care atau bahkan dengan Anda sebagai pemilik blog. Kelebihan ini bukan hanya sebatas memudahkan pelanggan untuk berkomunikasi, tetapi juga menciptakan rasa percaya yang kuat. Kehadiran tombol telepon otomatis, baik dalam bentuk anchor tag hyperlink atau tombol khusus, memberikan kemudahan akses kepada calon pelanggan atau pembeli yang ingin menghubungi Anda.

Anchor tag hyperlink adalah salah satu metode yang populer, di mana Anda dapat membuat tautan yang langsung mengarahkan pengunjung ke panggilan telepon atau pesan teks. Namun, ini bukan hanya tentang tampilan atau elemen desain semata, melainkan sebuah alat yang kuat untuk meningkatkan keterlibatan pengunjung dan, yang tak kalah penting, tingkat konversi.

Dengan pesatnya perkembangan teknologi, penggunaan tombol telepon otomatis dalam HTML terus berkembang. Terutama sejak popularitas penggunaan smartphone Android semakin meningkat, telah terjadi perkembangan signifikan dalam cara pengguna dapat menghubungi nomor telepon yang terkait dengan bisnis atau layanan tanpa perlu menyalin dan mem-paste nomor tersebut. Salah satu contoh paling mencolok adalah penggunaan atribut "href" dengan skema "tel:" dalam anchor tag. Dengan ini, pengguna dapat dengan mudah mengklik tautan telepon dan langsung membuka aplikasi telepon mereka, menghadirkan tingkat kemudahan yang luar biasa.

Ini adalah contoh nyata bagaimana teknologi web selalu beradaptasi dengan perangkat seluler dan kebutuhan pengguna. Hal ini menghasilkan pengalaman yang lebih nyaman dan efisien bagi semua pihak yang terlibat. Dalam keseluruhan, penggunaan tombol telepon otomatis adalah salah satu alat penting yang dapat membantu pemilik blog dalam menjalin koneksi cepat dengan calon pelanggan atau pembeli, memberikan pengalaman yang lebih baik, dan meningkatkan kesuksesan bisnis secara keseluruhan.

Bagi Anda yang ingin mengetahui Cara Membuat Tombol WhatsApp Langsung Kirim Otomatis silakan Anda baca artikel berikut :

• Cara Membuat Redirect Link WhatsApp Chat
• Tombol Chat WhatsApp Bentuk 3D Cube Keren Banget

Pilihan Tampilan Tombol Telepon Otomatis

Anda dapat dengan mudah menampilkan tombol telepon otomatis yang telah disediakan dalam beberapa pilihan atau membuatnya sendiri agar sesuai dengan template blog Anda. Memasukkan tombol telepon otomatis adalah cara yang cerdas untuk meningkatkan interaksi pengguna dan memberikan kenyamanan dalam menghubungi Anda. Berikut beberapa pilihan tombol yang menarik yang bisa Anda gunakan dengan mudah.

• Tombol Telepon Dengan Tampilan Animasi Lucu

  Animasi burung piyo dengan warna dominan kuning yang menggemaskan! Dalam animasi ini, terdapat 3 burung piyo yang begitu lucu dan imut sehingga sangat cocok digunakan sebagai tombol telepon di blog Anda. Keberadaan mereka tidak hanya menambahkan nuansa keceriaan, tetapi juga memiliki daya tarik yang mampu mengundang perhatian pengunjung blog Anda.

  Dengan tampilan yang menggemaskan ini, pengunjung akan merasa tertarik dan diundang untuk segera berinteraksi, seperti menanyakan produk atau jasa yang Anda tawarkan di blog Anda. Dengan demikian, animasi burung piyo ini tidak hanya mempercantik tampilan blog Anda, tetapi juga membantu meningkatkan tingkat keterlibatan pengunjung secara menyenangkan.

  <center>
  <div class="btnContent">
  <a href="tel:+62234567890" class="button button--piyo">
  <div class="button__wrapper">
  <span class="button__text"><i class="fa fa-phone-square fa-2x" aria-hidden="true" style="color:#fd5a00;"></i></span>
  </div>
  <div class="characterBox">
  <div class="character wakeup">
  <div class="character__face"></div>
  </div>
  <div class="character wakeup">
  <div class="character__face"></div>
  </div>
  <div class="character">
  <div class="character__face"></div>
  </div>
  </div>
  </a>
  </div>
  </center>
  
  <style>
  .button--piyo{
  --main_color : #f4cf47 ;
  --sub_color1 : #f4e19c ;
  --sub_color2 : #ff8108 ;
  --base_color : #000 ;
  --border_radius1 : 60px 60px 40px 40px / 48px 48px 30px 30px ;
  --border_radius2 : 70px 70px 40px 40px / 48px 48px 30px 30px ;
  --border_radius3 : 40px 40px 40px 40px / 48px 48px 30px 30px ;
  }
  .button{
  position : relative ;
  display : flex ;
  justify-content : center ;
  align-items : center ;
  width : 280px ;
  height : 80px ;
  box-sizing : border-box ;
  text-decoration : none ;
  border : solid 3px #000 ;
  border-radius : 40px ;
  background : var(--main_color) ;
  font-family: 'Fredoka One', cursive;
  }
  .button::before{
  content : '' ;
  position : absolute ;
  z-index : 2 ;
  top : 0 ;
  right : 20px ;
  bottom : 0 ;
  margin : auto 0 ;
  width : 24px ;
  height : 24px ;
  background : var(--base_color) ;
  transition : all ease .2s ;
  }
  .button__wrapper{
  display : flex ;
  justify-content : center ;
  align-items : center ;
  position : relative ;
  z-index : 1 ;
  width : 100% ;
  height : 100% ;
  border-radius : 40px ;
  overflow : hidden ;
  }
  .button__wrapper::before,
  .button__wrapper::after{
  transition : all .5s ease ;
  }
  .characterBox{
  position : absolute ;
  top : -54px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  display : flex ;
  justify-content : space-between ;
  align-items : flex-end ;
  width : 180px ;
  height : 56px ;
  }
  .button__text{
  position : relative ;
  z-index : 3 ;
  font-size : 32px ;
  letter-spacing : 4px ;
  color : var(--base_color) ;
  transition : all .3s ease ;
  }
  .character{
  position : relative ;
  width : 56px ;
  height : 36px ;
  box-sizing : border-box ;
  border : solid 3px #000 ;
  background : var(--main_color) ;
  border-radius : var(--border_radius1) ;
  animation : sleep 1s ease infinite alternate ;
  }
  .character::before{
  content : '' ;
  position : absolute ;
  top : -12px ;
  left : 22px ;
  width : 12px ;
  height : 12px ;
  background : #000 ;
  clip-path : path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z') ;
  }
  .character__face{
  position : absolute ;
  z-index : 2 ;
  top : 15px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 12px ;
  height : 6px ;
  background : var(--sub_color2) ;
  border-radius : 50% 50% 50% 50% / 78% 78% 22% 22% ;
  transition : .2s ;
  }
  .character__face::before,
  .character__face::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 8px ;
  height : 2px ;
  border-radius : 4px ;
  background : #000 ;
  }
  .character__face::before{
  left : -5px ;
  }
  .character__face::after{
  right : -5px ;
  }
  .button--hoo .character__face::before,
  .button--hoo .character__face::after{
  background : #fff ;
  }
  .button--hoo .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  top : 8px ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 14px ;
  height : 10px ;
  background : #385082 ;
  animation : face_hoo 1s ease infinite alternate ;
  }
  .button--hoo .charactor__face2::before,
  .button--hoo .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -1px ;
  width : 20px ;
  height : 10px ;
  box-sizing : border-box ;
  border-radius : 50% ;
  border : solid 3px #385082 ;
  background : #000 ;
  }
  .button--hoo .charactor__face2::before{
  left : -12px ;
  }
  .button--hoo .charactor__face2::after{
  right : -12px ;
  }
  .button--hoo .charactor__body{
  position : absolute ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
  animation : body_hoo 1s ease infinite alternate ;
  }
  .button--hoo .charactor__body::before,
  .button--hoo .charactor__body::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
  }
  .button--hoo .charactor__body::before{
  left : -17px ;
  }
  .button--hoo .charactor__body::after{
  right : -17px ;
  }
  
  .button--pen .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 30px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
  animation : face_pen 1s ease infinite alternate ;
  }
  .button--pen .charactor__face2::before,
  .button--pen .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -8px ;
  width : 17px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
  }
  .button--pen .charactor__face2::before{
  left : -4px ;
  }
  .button--pen .charactor__face2::after{
  right : -4px ;
  }
  
  .button--piyo::before{
  clip-path : path('M24,12.02c0-1.09-.75-1.71-.81-1.77L11.17,.45c-.91-.74-2.21-.56-2.91,.42-.69,.97-.52,2.37,.39,3.11l7.12,5.81-13.7-.02h0C.93,9.77,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l13.7,.02-7.13,5.78c-.91,.74-1.09,2.13-.4,3.11,.41,.58,1.03,.88,1.65,.88,.44,0,.88-.15,1.25-.45l12.04-9.76c.07-.06,.82-.67,.82-1.77Z') ;
  }
  .button--hoo::before{
  clip-path : path('M21.93,9.8h-3.33S11.5,.79,11.5,.79c-.74-.94-2.05-1.05-2.92-.26-.88,.79-.99,2.19-.25,3.13l4.84,6.13-11.09-.02C.95,9.73,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l11.09,.02-4.86,6.12c-.74,.93-.63,2.33,.24,3.13,.39,.35,.87,.53,1.34,.53,.59,0,1.17-.27,1.58-.78l7.13-8.99h3.32s0,0,0,0c1.14,0,2.07-.99,2.07-2.22,0-1.23-.93-2.22-2.07-2.22Z') ;
  }
  .button--pen::before{
  clip-path : path('M23.36,10.63L6.18,.13c-.93-.57-1.85,.81-1.39,2.06l1.44,3.91c.3,.81,.01,1.81-.6,2.1L.72,10.58c-.96,.47-.96,2.37,0,2.83l4.91,2.38c.62,.3,.9,1.29,.6,2.1l-1.44,3.91c-.46,1.26,.46,2.63,1.39,2.06L23.36,13.37c.86-.53,.86-2.22,0-2.75Z') ;
  }
  .button--piyo .button__wrapper::before,
  .button--piyo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  bottom : 0 ;
  width : 130px ;
  height : 38px ;
  background : var(--sub_color1) ;
  clip-path : path('M13.77,37.35L.25,16.6c-.87-1.33,.69-2.91,2-2.02l12.67,8.59c.81,.55,1.91,.14,2.18-.81l2.62-9.33c.39-1.4,2.34-1.42,2.76-.02l3.6,11.99c.33,1.11,1.74,1.4,2.47,.52L49.38,.52c.87-1.04,2.53-.42,2.53,.95V23.7c0,1.13,1.2,1.83,2.16,1.26l12.75-7.51c.85-.5,1.94,0,2.13,.98l1.5,7.6c.2,1.03,1.37,1.51,2.22,.92l17.74-12.3c1.09-.75,2.52,.25,2.21,1.55l-2.44,10.2c-.26,1.09,.74,2.06,1.8,1.75l30.8-9.04c1.37-.4,2.42,1.26,1.49,2.36l-9.07,10.66c-.83,.98-.1,2.49,1.17,2.42l12.12-.68c1.6-.09,2.12,2.15,.65,2.8l-2.73,1.21c-.18,.08-.38,.12-.58,.12H14.97c-.48,0-.93-.25-1.2-.65Z') ;
  }
  .button--piyo .button__wrapper::before{
  left : 0 ;
  }
  .button--piyo .button__wrapper::after{
  right : 0 ;
  transform : rotateY(180deg) ;
  }
  .button--hoo .button__wrapper::before,
  .button--hoo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 80px ;
  height : 100px ;
  background : var(--sub_color1) ;
  clip-path : path('M75.96,41.27l-42.76,11.17V0H0V100H33.2v-28.75l45.07-23.97c3.38-1.8,1.39-6.98-2.31-6.01Z') ;
  }
  .button--hoo .button__wrapper::before{
  left : 6px ;
  bottom : 0 ;
  }
  .button--hoo .button__wrapper::after{
  right : 8px ;
  bottom : -10px ;
  transform : rotateY(180deg) ;
  }
  .button--pen .button__wrapper::before,
  .button--pen .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 110px ;
  height : 60px ;
  background : var(--sub_color1) ;
  clip-path : path('M9.12,14.14L43.15,.5c1.61-.86,3.57-.59,4.9,.68l19.55,14.31c.42,.4,.76,.89,.99,1.42l3.45,13.09c.89,2.06,3.18,3.09,5.28,2.37l11.76-4.86c1.56-.54,3.29-.11,4.43,1.1l11.93,12.39c.48,.51,.84,1.12,1.03,1.8l3.35,11.62c.8,2.79-1.25,5.58-4.1,5.58H4.27c-2.71,0-4.73-2.54-4.18-5.24L6.92,17.11c.26-1.28,1.07-2.37,2.2-2.97Z') ;
  }
  .button--pen .button__wrapper::before{
  left : -16px ;
  bottom : -10px ;
  }
  .button--pen .button__wrapper::after{
  right : -8px ;
  bottom : -20px ;
  transform : rotateY(180deg) ;
  }
  .button:hover .button__wrapper::before{
  transform : translateX(-12px) ;
  }
  .button:hover .button__wrapper::after{
  transform : rotateY(180deg) translateX(-12px) ;
  }
  .button:hover .button__text{
  letter-spacing : 6px ;
  }
  .button:hover::before{
  right : 14px ;
  }
  .button:hover .wakeup{
  animation : wakeup .2s ease ;
  animation-fill-mode : forwards ;
  }
  .button:hover .wakeup .character__face{
  top : 20px ;
  }
  .button:hover .wakeup .character__face::before,
  .button:hover .wakeup .character__face::after{
  animation : eye 5s linear infinite ;
  }
  .button:hover .wakeup:nth-child(2) .character__face::before,
  .button:hover .wakeup:nth-child(2) .character__face::after{
  animation : eye_2 5s linear infinite ;
  }
  .button--hoo:hover .wakeup .charactor__face2::before,
  .button--hoo:hover .wakeup .charactor__face2::after{
  height : 20px ;
  }
  .button--hoo:hover .wakeup .charactor__body{
  animation : body_hoo_wakeup .2s ease ;
  animation-fill-mode : forwards ;
  border-top : solid 6px #385082 ;
  }
  .button--hoo:hover .wakeup .charactor__body::before,
  .button--hoo:hover .wakeup .charactor__body::after{
  top : -12px ;
  border-top : solid 5px #385082 ;
  }
  .button--pen:hover .wakeup .charactor__face2{
  animation : face_pen_wakeup .2s ease ;
  animation-fill-mode : forwards ;
  }
  .button--pen:hover .wakeup .charactor__face2::before,
  .button--pen:hover .wakeup .charactor__face2::after{
  top : -12px ;
  height : 18px ;
  }
  @keyframes sleep{
  0% {
  height : 36px ;
  border-radius : var(--border_radius1) ;
  }
  100%{
  height : 32px ;
  border-radius : var(--border_radius2) ;
  }
  }
  @keyframes wakeup{
  0% {
  height : 32px ;
  border-radius : var(--border_radius2) ;
  }
  100%{
  height : 56px ;
  border-radius : var(--border_radius3) ;
  }
  }
  @keyframes eye {
  0%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  30%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  32%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  34%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  70%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  72%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  74%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  76%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  78%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  100%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  }
  @keyframes eye_2 {
  0%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  10%{
  transform : translateX(0);
  }
  12%{
  transform : translateX(3px);
  }
  20%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  22%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  24%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  25%{
  transform : translateX(3px);
  }
  27%{
  transform : translateX(0);
  }
  74%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  transform : translateX(0);
  }
  76%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  transform : translateX(3px);
  }
  78%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  80%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  82%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  85%{
  transform : translateX(3px);
  }
  87%{
  transform : translateX(0);
  }
  100%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  transform : translateX(0);
  }
  }
  @keyframes body_hoo{
  0% {
  bottom : 2px ;
  }
  100%{
  bottom : 0 ;
  }
  }
  @keyframes body_hoo_wakeup{
  0% {
  bottom : 2px ;
  }
  100%{
  bottom : 6px ;
  }
  }
  @keyframes face_pen{
  0% {
  height : 14px ;
  }
  100%{
  height : 10px ;
  }
  }
  @keyframes face_pen_wakeup{
  0% {
  height : 14px ;
  }
  100%{
  height : 28px ;
  }
  }
  .button:not(:last-child){
  margin-bottom : 80px ;
  }
  .btnContent{
  padding: 5px;
  margin-top: 20px;
  clear: both;
  display: inline-block;
  }
  </style>

  Keterangan :

  Jangan lupa !!! ganti teks tel:+62234567890 dengan nomor telepon yang akan Anda gunakan untuk berkomunikasi dengan pengunjung blog atau calon pembeli Anda.

  ---

  Keindahan animasi burung piyo dengan warna dominan biru yang begitu memikat! Dalam animasi ini, kita disuguhi dengan pesona 3 burung piyo yang sungguh lucu dan menggemaskan, yang akan menambah daya tarik luar biasa bagi pengunjung blog Anda. Penggunaan mereka sebagai tombol telepon adalah ide yang cerdas, karena tidak hanya akan menambah nuansa keceriaan dalam tampilan blog Anda, tetapi juga memotivasi pengunjung untuk berinteraksi lebih aktif.

  Dengan daya tarik yang menggemaskan ini, pengunjung akan merasa terinspirasi untuk segera menanyakan produk atau jasa yang Anda tawarkan di blog Anda. Keseluruhan, animasi burung piyo biru ini adalah pilihan yang sempurna untuk mempercantik dan meningkatkan tingkat keterlibatan pengunjung di blog Anda.

  <center>
  <div class="btnContent">
  <a href="tel:+62234567890" class="button button--hoo">
  <div class="button__wrapper">
  <span class="button__text"><i class="fa fa-phone-square fa-2x" aria-hidden="true" style="color:#162355;"></i></span>
  </div>
  <div class="characterBox">
  <div class="character wakeup">
  <div class="character__face"></div>
  <div class="charactor__face2"></div>
  <div class="charactor__body"></div>
  </div>
  <div class="character wakeup">
  <div class="character__face"></div>
  <div class="charactor__face2"></div>
  <div class="charactor__body"></div>
  </div>
  <div class="character">
  <div class="character__face"></div>
  <div class="charactor__face2"></div>
  <div class="charactor__body"></div>
  </div>
  </div>
  </a>
  </div>
  </center>
  
  <style>
  .button--piyo{
  --main_color : #f4cf47 ;
  --sub_color1 : #f4e19c ;
  --sub_color2 : #ff8108 ;
  --base_color : #000 ;
  --border_radius1 : 60px 60px 40px 40px / 48px 48px 30px 30px ;
  --border_radius2 : 70px 70px 40px 40px / 48px 48px 30px 30px ;
  --border_radius3 : 40px 40px 40px 40px / 48px 48px 30px 30px ;
  }
  .button{
  position : relative ;
  display : flex ;
  justify-content : center ;
  align-items : center ;
  width : 280px ;
  height : 80px ;
  box-sizing : border-box ;
  text-decoration : none ;
  border : solid 3px #000 ;
  border-radius : 40px ;
  background : var(--main_color) ;
  font-family: 'Fredoka One', cursive;
  }
  .button::before{
  content : '' ;
  position : absolute ;
  z-index : 2 ;
  top : 0 ;
  right : 20px ;
  bottom : 0 ;
  margin : auto 0 ;
  width : 24px ;
  height : 24px ;
  background : var(--base_color) ;
  transition : all ease .2s ;
  }
  .button__wrapper{
  display : flex ;
  justify-content : center ;
  align-items : center ;
  position : relative ;
  z-index : 1 ;
  width : 100% ;
  height : 100% ;
  border-radius : 40px ;
  overflow : hidden ;
  }
  .button__wrapper::before,
  .button__wrapper::after{
  transition : all .5s ease ;
  }
  .characterBox{
  position : absolute ;
  top : -54px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  display : flex ;
  justify-content : space-between ;
  align-items : flex-end ;
  width : 180px ;
  height : 56px ;
  }
  .button__text{
  position : relative ;
  z-index : 3 ;
  font-size : 32px ;
  letter-spacing : 4px ;
  color : var(--base_color) ;
  transition : all .3s ease ;
  }
  .character{
  position : relative ;
  width : 56px ;
  height : 36px ;
  box-sizing : border-box ;
  border : solid 3px #000 ;
  background : var(--main_color) ;
  border-radius : var(--border_radius1) ;
  animation : sleep 1s ease infinite alternate ;
  }
  .character::before{
  content : '' ;
  position : absolute ;
  top : -12px ;
  left : 22px ;
  width : 12px ;
  height : 12px ;
  background : #000 ;
  clip-path : path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z') ;
  }
  .character__face{
  position : absolute ;
  z-index : 2 ;
  top : 15px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 12px ;
  height : 6px ;
  background : var(--sub_color2) ;
  border-radius : 50% 50% 50% 50% / 78% 78% 22% 22% ;
  transition : .2s ;
  }
  .character__face::before,
  .character__face::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 8px ;
  height : 2px ;
  border-radius : 4px ;
  background : #000 ;
  }
  .character__face::before{
  left : -5px ;
  }
  .character__face::after{
  right : -5px ;
  }
  .button--hoo .character__face::before,
  .button--hoo .character__face::after{
  background : #fff ;
  }
  .button--hoo .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  top : 8px ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 14px ;
  height : 10px ;
  background : #385082 ;
  animation : face_hoo 1s ease infinite alternate ;
  }
  .button--hoo .charactor__face2::before,
  .button--hoo .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -1px ;
  width : 20px ;
  height : 10px ;
  box-sizing : border-box ;
  border-radius : 50% ;
  border : solid 3px #385082 ;
  background : #000 ;
  }
  .button--hoo .charactor__face2::before{
  left : -12px ;
  }
  .button--hoo .charactor__face2::after{
  right : -12px ;
  }
  .button--hoo .charactor__body{
  position : absolute ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
  animation : body_hoo 1s ease infinite alternate ;
  }
  .button--hoo .charactor__body::before,
  .button--hoo .charactor__body::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
  }
  .button--hoo .charactor__body::before{
  left : -17px ;
  }
  .button--hoo .charactor__body::after{
  right : -17px ;
  }
  
  .button--pen .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 30px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
  animation : face_pen 1s ease infinite alternate ;
  }
  .button--pen .charactor__face2::before,
  .button--pen .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -8px ;
  width : 17px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
  }
  .button--pen .charactor__face2::before{
  left : -4px ;
  }
  .button--pen .charactor__face2::after{
  right : -4px ;
  }
  
  .button--piyo::before{
  clip-path : path('M24,12.02c0-1.09-.75-1.71-.81-1.77L11.17,.45c-.91-.74-2.21-.56-2.91,.42-.69,.97-.52,2.37,.39,3.11l7.12,5.81-13.7-.02h0C.93,9.77,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l13.7,.02-7.13,5.78c-.91,.74-1.09,2.13-.4,3.11,.41,.58,1.03,.88,1.65,.88,.44,0,.88-.15,1.25-.45l12.04-9.76c.07-.06,.82-.67,.82-1.77Z') ;
  }
  .button--hoo::before{
  clip-path : path('M21.93,9.8h-3.33S11.5,.79,11.5,.79c-.74-.94-2.05-1.05-2.92-.26-.88,.79-.99,2.19-.25,3.13l4.84,6.13-11.09-.02C.95,9.73,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l11.09,.02-4.86,6.12c-.74,.93-.63,2.33,.24,3.13,.39,.35,.87,.53,1.34,.53,.59,0,1.17-.27,1.58-.78l7.13-8.99h3.32s0,0,0,0c1.14,0,2.07-.99,2.07-2.22,0-1.23-.93-2.22-2.07-2.22Z') ;
  }
  .button--pen::before{
  clip-path : path('M23.36,10.63L6.18,.13c-.93-.57-1.85,.81-1.39,2.06l1.44,3.91c.3,.81,.01,1.81-.6,2.1L.72,10.58c-.96,.47-.96,2.37,0,2.83l4.91,2.38c.62,.3,.9,1.29,.6,2.1l-1.44,3.91c-.46,1.26,.46,2.63,1.39,2.06L23.36,13.37c.86-.53,.86-2.22,0-2.75Z') ;
  }
  .button--piyo .button__wrapper::before,
  .button--piyo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  bottom : 0 ;
  width : 130px ;
  height : 38px ;
  background : var(--sub_color1) ;
  clip-path : path('M13.77,37.35L.25,16.6c-.87-1.33,.69-2.91,2-2.02l12.67,8.59c.81,.55,1.91,.14,2.18-.81l2.62-9.33c.39-1.4,2.34-1.42,2.76-.02l3.6,11.99c.33,1.11,1.74,1.4,2.47,.52L49.38,.52c.87-1.04,2.53-.42,2.53,.95V23.7c0,1.13,1.2,1.83,2.16,1.26l12.75-7.51c.85-.5,1.94,0,2.13,.98l1.5,7.6c.2,1.03,1.37,1.51,2.22,.92l17.74-12.3c1.09-.75,2.52,.25,2.21,1.55l-2.44,10.2c-.26,1.09,.74,2.06,1.8,1.75l30.8-9.04c1.37-.4,2.42,1.26,1.49,2.36l-9.07,10.66c-.83,.98-.1,2.49,1.17,2.42l12.12-.68c1.6-.09,2.12,2.15,.65,2.8l-2.73,1.21c-.18,.08-.38,.12-.58,.12H14.97c-.48,0-.93-.25-1.2-.65Z') ;
  }
  .button--piyo .button__wrapper::before{
  left : 0 ;
  }
  .button--piyo .button__wrapper::after{
  right : 0 ;
  transform : rotateY(180deg) ;
  }
  .button--hoo .button__wrapper::before,
  .button--hoo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 80px ;
  height : 100px ;
  background : var(--sub_color1) ;
  clip-path : path('M75.96,41.27l-42.76,11.17V0H0V100H33.2v-28.75l45.07-23.97c3.38-1.8,1.39-6.98-2.31-6.01Z') ;
  }
  .button--hoo .button__wrapper::before{
  left : 6px ;
  bottom : 0 ;
  }
  .button--hoo .button__wrapper::after{
  right : 8px ;
  bottom : -10px ;
  transform : rotateY(180deg) ;
  }
  .button--pen .button__wrapper::before,
  .button--pen .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 110px ;
  height : 60px ;
  background : var(--sub_color1) ;
  clip-path : path('M9.12,14.14L43.15,.5c1.61-.86,3.57-.59,4.9,.68l19.55,14.31c.42,.4,.76,.89,.99,1.42l3.45,13.09c.89,2.06,3.18,3.09,5.28,2.37l11.76-4.86c1.56-.54,3.29-.11,4.43,1.1l11.93,12.39c.48,.51,.84,1.12,1.03,1.8l3.35,11.62c.8,2.79-1.25,5.58-4.1,5.58H4.27c-2.71,0-4.73-2.54-4.18-5.24L6.92,17.11c.26-1.28,1.07-2.37,2.2-2.97Z') ;
  }
  .button--pen .button__wrapper::before{
  left : -16px ;
  bottom : -10px ;
  }
  .button--pen .button__wrapper::after{
  right : -8px ;
  bottom : -20px ;
  transform : rotateY(180deg) ;
  }
  .button:hover .button__wrapper::before{
  transform : translateX(-12px) ;
  }
  .button:hover .button__wrapper::after{
  transform : rotateY(180deg) translateX(-12px) ;
  }
  .button:hover .button__text{
  letter-spacing : 6px ;
  }
  .button:hover::before{
  right : 14px ;
  }
  .button:hover .wakeup{
  animation : wakeup .2s ease ;
  animation-fill-mode : forwards ;
  }
  .button:hover .wakeup .character__face{
  top : 20px ;
  }
  .button:hover .wakeup .character__face::before,
  .button:hover .wakeup .character__face::after{
  animation : eye 5s linear infinite ;
  }
  .button:hover .wakeup:nth-child(2) .character__face::before,
  .button:hover .wakeup:nth-child(2) .character__face::after{
  animation : eye_2 5s linear infinite ;
  }
  .button--hoo:hover .wakeup .charactor__face2::before,
  .button--hoo:hover .wakeup .charactor__face2::after{
  height : 20px ;
  }
  .button--hoo:hover .wakeup .charactor__body{
  animation : body_hoo_wakeup .2s ease ;
  animation-fill-mode : forwards ;
  border-top : solid 6px #385082 ;
  }
  .button--hoo:hover .wakeup .charactor__body::before,
  .button--hoo:hover .wakeup .charactor__body::after{
  top : -12px ;
  border-top : solid 5px #385082 ;
  }
  .button--pen:hover .wakeup .charactor__face2{
  animation : face_pen_wakeup .2s ease ;
  animation-fill-mode : forwards ;
  }
  .button--pen:hover .wakeup .charactor__face2::before,
  .button--pen:hover .wakeup .charactor__face2::after{
  top : -12px ;
  height : 18px ;
  }
  @keyframes sleep{
  0% {
  height : 36px ;
  border-radius : var(--border_radius1) ;
  }
  100%{
  height : 32px ;
  border-radius : var(--border_radius2) ;
  }
  }
  @keyframes wakeup{
  0% {
  height : 32px ;
  border-radius : var(--border_radius2) ;
  }
  100%{
  height : 56px ;
  border-radius : var(--border_radius3) ;
  }
  }
  @keyframes eye {
  0%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  30%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  32%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  34%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  70%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  72%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  74%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  76%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  78%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  100%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  }
  @keyframes eye_2 {
  0%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  10%{
  transform : translateX(0);
  }
  12%{
  transform : translateX(3px);
  }
  20%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  22%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  24%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  25%{
  transform : translateX(3px);
  }
  27%{
  transform : translateX(0);
  }
  74%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  transform : translateX(0);
  }
  76%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  transform : translateX(3px);
  }
  78%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  80%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  82%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  85%{
  transform : translateX(3px);
  }
  87%{
  transform : translateX(0);
  }
  100%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  transform : translateX(0);
  }
  }
  @keyframes body_hoo{
  0% {
  bottom : 2px ;
  }
  100%{
  bottom : 0 ;
  }
  }
  @keyframes body_hoo_wakeup{
  0% {
  bottom : 2px ;
  }
  100%{
  bottom : 6px ;
  }
  }
  @keyframes face_pen{
  0% {
  height : 14px ;
  }
  100%{
  height : 10px ;
  }
  }
  @keyframes face_pen_wakeup{
  0% {
  height : 14px ;
  }
  100%{
  height : 28px ;
  }
  }
  .button:not(:last-child){
  margin-bottom : 80px ;
  }
  .btnContent{
  padding: 5px;
  margin-top: 20px;
  clear: both;
  display: inline-block;
  }
  </style>

  Keterangan :

  Jangan lupa !!! ganti teks tel:+62234567890 dengan nomor telepon yang akan Anda gunakan untuk berkomunikasi dengan pengunjung blog atau calon pembeli Anda.

  ---

  Keindahan animasi burung piyo dengan warna dominan gelap menghadirkan pesona yang unik dan memikat! Tampilan 3 burung piyo yang menggemaskan dalam nuansa gelap ini adalah pilihan yang menarik untuk digunakan sebagai tombol telepon di blog Anda. Mereka memberikan sentuhan khusus pada tampilan blog Anda yang dapat mengundang perhatian pengunjung dengan caranya yang khas.

  Keunikan ini memberikan kesempatan yang sempurna untuk mengajak pengunjung untuk berinteraksi dan segera menanyakan produk atau jasa yang Anda tawarkan. Animasi burung piyo gelap ini tidak hanya mempercantik blog Anda, tetapi juga memberikan kesan eksklusif dan menarik yang dapat membantu meningkatkan tingkat keterlibatan pengunjung secara menarik.

  <center>
  <div class="btnContent">
  <a href="tel:+62234567890" class="button button--pen">
  <div class="button__wrapper">
  <span class="button__text"><i class="fa fa-phone-square fa-2x" aria-hidden="true" style="color:#cbd7fb;"></i></span>
  </div>
  <div class="characterBox">
  <div class="character wakeup">
  <div class="character__face"></div>
  <div class="charactor__face2"></div>
  </div>
  <div class="character wakeup">
  <div class="character__face"></div>
  <div class="charactor__face2"></div>
  </div>
  <div class="character">
  <div class="character__face"></div>
  <div class="charactor__face2"></div>
  </div>
  </div>
  </a>
  </div>
  </center>
  
  <style>
  .button--piyo{
  --main_color : #f4cf47 ;
  --sub_color1 : #f4e19c ;
  --sub_color2 : #ff8108 ;
  --base_color : #000 ;
  --border_radius1 : 60px 60px 40px 40px / 48px 48px 30px 30px ;
  --border_radius2 : 70px 70px 40px 40px / 48px 48px 30px 30px ;
  --border_radius3 : 40px 40px 40px 40px / 48px 48px 30px 30px ;
  }
  .button{
  position : relative ;
  display : flex ;
  justify-content : center ;
  align-items : center ;
  width : 280px ;
  height : 80px ;
  box-sizing : border-box ;
  text-decoration : none ;
  border : solid 3px #000 ;
  border-radius : 40px ;
  background : var(--main_color) ;
  font-family: 'Fredoka One', cursive;
  }
  .button::before{
  content : '' ;
  position : absolute ;
  z-index : 2 ;
  top : 0 ;
  right : 20px ;
  bottom : 0 ;
  margin : auto 0 ;
  width : 24px ;
  height : 24px ;
  background : var(--base_color) ;
  transition : all ease .2s ;
  }
  .button__wrapper{
  display : flex ;
  justify-content : center ;
  align-items : center ;
  position : relative ;
  z-index : 1 ;
  width : 100% ;
  height : 100% ;
  border-radius : 40px ;
  overflow : hidden ;
  }
  .button__wrapper::before,
  .button__wrapper::after{
  transition : all .5s ease ;
  }
  .characterBox{
  position : absolute ;
  top : -54px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  display : flex ;
  justify-content : space-between ;
  align-items : flex-end ;
  width : 180px ;
  height : 56px ;
  }
  .button__text{
  position : relative ;
  z-index : 3 ;
  font-size : 32px ;
  letter-spacing : 4px ;
  color : var(--base_color) ;
  transition : all .3s ease ;
  }
  .character{
  position : relative ;
  width : 56px ;
  height : 36px ;
  box-sizing : border-box ;
  border : solid 3px #000 ;
  background : var(--main_color) ;
  border-radius : var(--border_radius1) ;
  animation : sleep 1s ease infinite alternate ;
  }
  .character::before{
  content : '' ;
  position : absolute ;
  top : -12px ;
  left : 22px ;
  width : 12px ;
  height : 12px ;
  background : #000 ;
  clip-path : path('M10.23,3.32c-3.54,.63-5.72,2.51-7.02,4.23-.33-1.58-.34-3.54,.93-5.12,.52-.65,.41-1.59-.24-2.11C3.24-.19,2.29-.08,1.77,.57c-3.82,4.77-.31,11.11-.13,11.42,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0-.01-.02,2.49,.04,2.52,0,.1-.14,1.54-4.82,6.59-5.71,.82-.14,1.37-.92,1.22-1.74s-.94-1.36-1.75-1.21Z') ;
  }
  .character__face{
  position : absolute ;
  z-index : 2 ;
  top : 15px ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 12px ;
  height : 6px ;
  background : var(--sub_color2) ;
  border-radius : 50% 50% 50% 50% / 78% 78% 22% 22% ;
  transition : .2s ;
  }
  .character__face::before,
  .character__face::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 8px ;
  height : 2px ;
  border-radius : 4px ;
  background : #000 ;
  }
  .character__face::before{
  left : -5px ;
  }
  .character__face::after{
  right : -5px ;
  }
  .button--hoo .character__face::before,
  .button--hoo .character__face::after{
  background : #fff ;
  }
  .button--hoo .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  top : 8px ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 14px ;
  height : 10px ;
  background : #385082 ;
  animation : face_hoo 1s ease infinite alternate ;
  }
  .button--hoo .charactor__face2::before,
  .button--hoo .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -1px ;
  width : 20px ;
  height : 10px ;
  box-sizing : border-box ;
  border-radius : 50% ;
  border : solid 3px #385082 ;
  background : #000 ;
  }
  .button--hoo .charactor__face2::before{
  left : -12px ;
  }
  .button--hoo .charactor__face2::after{
  right : -12px ;
  }
  .button--hoo .charactor__body{
  position : absolute ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : 0 auto ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
  animation : body_hoo 1s ease infinite alternate ;
  }
  .button--hoo .charactor__body::before,
  .button--hoo .charactor__body::after{
  content : '' ;
  position : absolute ;
  top : -4px ;
  width : 0 ;
  height : 0 ;
  border-top : solid 2px #385082 ;
  border-left : solid 7px transparent ;
  border-right : solid 7px transparent ;
  border-bottom : solid 0 transparent ;
  }
  .button--hoo .charactor__body::before{
  left : -17px ;
  }
  .button--hoo .charactor__body::after{
  right : -17px ;
  }
  
  .button--pen .charactor__face2{
  position : absolute ;
  z-index : 1 ;
  bottom : 0 ;
  left : 0 ;
  right : 0 ;
  margin : auto ;
  width : 30px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
  animation : face_pen 1s ease infinite alternate ;
  }
  .button--pen .charactor__face2::before,
  .button--pen .charactor__face2::after{
  content : '' ;
  position : absolute ;
  top : -8px ;
  width : 17px ;
  height : 10px ;
  border-radius : 50% ;
  background : #fff ;
  }
  .button--pen .charactor__face2::before{
  left : -4px ;
  }
  .button--pen .charactor__face2::after{
  right : -4px ;
  }
  
  .button--piyo::before{
  clip-path : path('M24,12.02c0-1.09-.75-1.71-.81-1.77L11.17,.45c-.91-.74-2.21-.56-2.91,.42-.69,.97-.52,2.37,.39,3.11l7.12,5.81-13.7-.02h0C.93,9.77,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l13.7,.02-7.13,5.78c-.91,.74-1.09,2.13-.4,3.11,.41,.58,1.03,.88,1.65,.88,.44,0,.88-.15,1.25-.45l12.04-9.76c.07-.06,.82-.67,.82-1.77Z') ;
  }
  .button--hoo::before{
  clip-path : path('M21.93,9.8h-3.33S11.5,.79,11.5,.79c-.74-.94-2.05-1.05-2.92-.26-.88,.79-.99,2.19-.25,3.13l4.84,6.13-11.09-.02C.95,9.73,0,10.76,0,11.99c0,1.23,.93,2.22,2.07,2.22l11.09,.02-4.86,6.12c-.74,.93-.63,2.33,.24,3.13,.39,.35,.87,.53,1.34,.53,.59,0,1.17-.27,1.58-.78l7.13-8.99h3.32s0,0,0,0c1.14,0,2.07-.99,2.07-2.22,0-1.23-.93-2.22-2.07-2.22Z') ;
  }
  .button--pen::before{
  clip-path : path('M23.36,10.63L6.18,.13c-.93-.57-1.85,.81-1.39,2.06l1.44,3.91c.3,.81,.01,1.81-.6,2.1L.72,10.58c-.96,.47-.96,2.37,0,2.83l4.91,2.38c.62,.3,.9,1.29,.6,2.1l-1.44,3.91c-.46,1.26,.46,2.63,1.39,2.06L23.36,13.37c.86-.53,.86-2.22,0-2.75Z') ;
  }
  .button--piyo .button__wrapper::before,
  .button--piyo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  bottom : 0 ;
  width : 130px ;
  height : 38px ;
  background : var(--sub_color1) ;
  clip-path : path('M13.77,37.35L.25,16.6c-.87-1.33,.69-2.91,2-2.02l12.67,8.59c.81,.55,1.91,.14,2.18-.81l2.62-9.33c.39-1.4,2.34-1.42,2.76-.02l3.6,11.99c.33,1.11,1.74,1.4,2.47,.52L49.38,.52c.87-1.04,2.53-.42,2.53,.95V23.7c0,1.13,1.2,1.83,2.16,1.26l12.75-7.51c.85-.5,1.94,0,2.13,.98l1.5,7.6c.2,1.03,1.37,1.51,2.22,.92l17.74-12.3c1.09-.75,2.52,.25,2.21,1.55l-2.44,10.2c-.26,1.09,.74,2.06,1.8,1.75l30.8-9.04c1.37-.4,2.42,1.26,1.49,2.36l-9.07,10.66c-.83,.98-.1,2.49,1.17,2.42l12.12-.68c1.6-.09,2.12,2.15,.65,2.8l-2.73,1.21c-.18,.08-.38,.12-.58,.12H14.97c-.48,0-.93-.25-1.2-.65Z') ;
  }
  .button--piyo .button__wrapper::before{
  left : 0 ;
  }
  .button--piyo .button__wrapper::after{
  right : 0 ;
  transform : rotateY(180deg) ;
  }
  .button--hoo .button__wrapper::before,
  .button--hoo .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 80px ;
  height : 100px ;
  background : var(--sub_color1) ;
  clip-path : path('M75.96,41.27l-42.76,11.17V0H0V100H33.2v-28.75l45.07-23.97c3.38-1.8,1.39-6.98-2.31-6.01Z') ;
  }
  .button--hoo .button__wrapper::before{
  left : 6px ;
  bottom : 0 ;
  }
  .button--hoo .button__wrapper::after{
  right : 8px ;
  bottom : -10px ;
  transform : rotateY(180deg) ;
  }
  .button--pen .button__wrapper::before,
  .button--pen .button__wrapper::after{
  content : '' ;
  position : absolute ;
  width : 110px ;
  height : 60px ;
  background : var(--sub_color1) ;
  clip-path : path('M9.12,14.14L43.15,.5c1.61-.86,3.57-.59,4.9,.68l19.55,14.31c.42,.4,.76,.89,.99,1.42l3.45,13.09c.89,2.06,3.18,3.09,5.28,2.37l11.76-4.86c1.56-.54,3.29-.11,4.43,1.1l11.93,12.39c.48,.51,.84,1.12,1.03,1.8l3.35,11.62c.8,2.79-1.25,5.58-4.1,5.58H4.27c-2.71,0-4.73-2.54-4.18-5.24L6.92,17.11c.26-1.28,1.07-2.37,2.2-2.97Z') ;
  }
  .button--pen .button__wrapper::before{
  left : -16px ;
  bottom : -10px ;
  }
  .button--pen .button__wrapper::after{
  right : -8px ;
  bottom : -20px ;
  transform : rotateY(180deg) ;
  }
  .button:hover .button__wrapper::before{
  transform : translateX(-12px) ;
  }
  .button:hover .button__wrapper::after{
  transform : rotateY(180deg) translateX(-12px) ;
  }
  .button:hover .button__text{
  letter-spacing : 6px ;
  }
  .button:hover::before{
  right : 14px ;
  }
  .button:hover .wakeup{
  animation : wakeup .2s ease ;
  animation-fill-mode : forwards ;
  }
  .button:hover .wakeup .character__face{
  top : 20px ;
  }
  .button:hover .wakeup .character__face::before,
  .button:hover .wakeup .character__face::after{
  animation : eye 5s linear infinite ;
  }
  .button:hover .wakeup:nth-child(2) .character__face::before,
  .button:hover .wakeup:nth-child(2) .character__face::after{
  animation : eye_2 5s linear infinite ;
  }
  .button--hoo:hover .wakeup .charactor__face2::before,
  .button--hoo:hover .wakeup .charactor__face2::after{
  height : 20px ;
  }
  .button--hoo:hover .wakeup .charactor__body{
  animation : body_hoo_wakeup .2s ease ;
  animation-fill-mode : forwards ;
  border-top : solid 6px #385082 ;
  }
  .button--hoo:hover .wakeup .charactor__body::before,
  .button--hoo:hover .wakeup .charactor__body::after{
  top : -12px ;
  border-top : solid 5px #385082 ;
  }
  .button--pen:hover .wakeup .charactor__face2{
  animation : face_pen_wakeup .2s ease ;
  animation-fill-mode : forwards ;
  }
  .button--pen:hover .wakeup .charactor__face2::before,
  .button--pen:hover .wakeup .charactor__face2::after{
  top : -12px ;
  height : 18px ;
  }
  @keyframes sleep{
  0% {
  height : 36px ;
  border-radius : var(--border_radius1) ;
  }
  100%{
  height : 32px ;
  border-radius : var(--border_radius2) ;
  }
  }
  @keyframes wakeup{
  0% {
  height : 32px ;
  border-radius : var(--border_radius2) ;
  }
  100%{
  height : 56px ;
  border-radius : var(--border_radius3) ;
  }
  }
  @keyframes eye {
  0%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  30%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  32%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  34%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  70%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  72%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  74%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  76%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  78%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  100%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  }
  @keyframes eye_2 {
  0%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  10%{
  transform : translateX(0);
  }
  12%{
  transform : translateX(3px);
  }
  20%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  22%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  24%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  25%{
  transform : translateX(3px);
  }
  27%{
  transform : translateX(0);
  }
  74%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  transform : translateX(0);
  }
  76%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  transform : translateX(3px);
  }
  78%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  80%{
  top : -4px ;
  width : 8px ;
  height : 2px ;
  }
  82%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  }
  85%{
  transform : translateX(3px);
  }
  87%{
  transform : translateX(0);
  }
  100%{
  top : -6px ;
  width : 6px ;
  height : 6px ;
  transform : translateX(0);
  }
  }
  @keyframes body_hoo{
  0% {
  bottom : 2px ;
  }
  100%{
  bottom : 0 ;
  }
  }
  @keyframes body_hoo_wakeup{
  0% {
  bottom : 2px ;
  }
  100%{
  bottom : 6px ;
  }
  }
  @keyframes face_pen{
  0% {
  height : 14px ;
  }
  100%{
  height : 10px ;
  }
  }
  @keyframes face_pen_wakeup{
  0% {
  height : 14px ;
  }
  100%{
  height : 28px ;
  }
  }
  .button:not(:last-child){
  margin-bottom : 80px ;
  }
  .btnContent{
  padding: 5px;
  margin-top: 20px;
  clear: both;
  display: inline-block;
  }
  </style>

  Keterangan :

  Jangan lupa !!! ganti teks tel:+62234567890 dengan nomor telepon yang akan Anda gunakan untuk berkomunikasi dengan pengunjung blog atau calon pembeli Anda.



• Tombol Telepon Dengan Tampilan Float (Melayang)

  Tombol Telepon Dengan Tampilan Float (Melayang) adalah sebuah tombol yang bisa memikat pengunjung blog serta praktis untuk meningkatkan pengalaman pengguna di blog Anda. Dengan desain bundar yang unik dan penuh animasi, tombol ini secara visual menonjol dan memberikan kesan modern yang menarik. Namun, keunggulan sejati terletak pada fitur-fitur otomatisnya.

  Dengan kemampuan auto hide saat pengguna melakukan scroll ke bawah, tombol ini tidak hanya memberikan kenyamanan bagi pengunjung Anda, tetapi juga menjaga tampilan blog tetap bersih dan tidak mengganggu. Sebaliknya, saat pengguna melakukan scroll ke atas, tombol ini secara otomatis muncul kembali, siap digunakan, memastikan pengunjung memiliki akses cepat ke informasi kontak penting.

  Kombinasi antara estetika visual yang menarik dan fungsionalitas canggih membuat Tombol Telepon Dengan Tampilan Float (Melayang) menjadi elemen yang dapat benar-benar menarik perhatian pengunjung Anda. Dengan tombol ini, Anda tidak hanya memberikan tampilan yang modern dan menarik pada blog Anda, tetapi juga meningkatkan keterlibatan dan kenyamanan pengguna secara signifikan.

  Tombol telepon ini menawarkan responsivitas yang sangat cerdas, memudahkan pengguna baik yang menggunakan browser PC maupun perangkat mobile. Saat diakses melalui PC, nomor telepon secara otomatis disalin ke clipboard pengguna, sementara pengguna mobile atau HP dapat langsung membuka aplikasi telepon dengan satu sentuhan, menjadikan komunikasi seluler dengan Anda lebih mudah dan efisien. Dengan fitur ini, pengalaman pengguna sangat nyaman, tanpa memandang perangkat yang digunakan.

  Sebagai contoh untuk melihat tombol menjadi melayang (float) silakan tekan tombol di bawah ini :

  <div class="cfl-call-btn" title="Call Us Now !"><i class="fa fa-phone" aria-hidden="true"></i></div>
  <style>
  .cfl-call-btn{
  clear:both;
  left: calc(50% - 2rem);
  bottom: 1rem;
  z-index: +99999;
  position: fixed;
  background: #d70000;
  width: 4rem;
  height: 4rem;
  padding: 2px 0px 0px 14px;
  border-radius: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  color: #ffffff;
  -webkit-animation: cc-calto-action-ripple 0.6s linear infinite;
  animation: cc-calto-action-ripple 0.6s linear infinite;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  justify-items: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  border: 4px #d9b317 inset;
  transition: 0.3s ease;
  }
  .cfl-call-btn:hover{
  background: #0b890a;
  border: 4px #d9b317 outset;
  padding: 4px 0px 0px 14px;
  }
  .cfl-call-btn:active{background: #000;}
  .cfl-call-btn i{
  -webkit-transition: 0.3s ease;
  font-size: 2.2rem;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
  }
  .cfl-call-btn:hover i{
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
  }
  @-webkit-keyframes cc-calto-action-ripple{
  0% {-webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
  }
  100% {-webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
  }}
  @keyframes cc-calto-action-ripple{
  0% {-webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 0 rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2);
  }
  100% {-webkit-box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
  box-shadow: 0 4px 10px rgba(236, 139, 0, 0.2), 0 0 0 5px rgba(236, 139, 0, 0.2), 0 0 0 10px rgba(236, 139, 0, 0.2), 0 0 0 20px rgba(236, 139, 0, 0);
  }}
  </style>
  
  <script>
  var countryCode='+62';
  var phoneNumber='89512345678';
  
  function copytoclipboard(target){
  const el = document.createElement('textarea');
  el.value = target;
  document.body.appendChild(el);
  el.select();
  document.execCommand('copy');
  document.body.removeChild(el);
  alert("Phone number copied to clipboard !\nTelp : "+countryCode+phoneNumber);
  }
  $( ".cfl-call-btn" ).mouseup(function(){
  var setPH="tel:"+countryCode+phoneNumber;
  if($(window).width() > 400){setPH=countryCode+phoneNumber;copytoclipboard(setPH);}else{window.open(setPH,'_self');}
  });
  var waEventHide=true;
  var waBoxPos=$(".cfl-call-btn").css('bottom');
  $(function() {
  $(window).on('wheel', function(e) {
  var delta = e.originalEvent.deltaY;
  if (delta > 0 && waEventHide==true){$(".cfl-call-btn").animate({'bottom':'-100px'},100);waEventHide=false;}
  else if(delta < 0 && waEventHide==false){$(".cfl-call-btn").animate({'bottom':waBoxPos},100);waEventHide=true;}
  });});
  </script>

  Keterangan :

  var countryCode='+62';
  Pada variabel input ini merupakan pengaturan untuk kode negara untuk nomor telepon yang Anda gunakan.

  var phoneNumber='89512345678';
  Pada variabel input ini merupakan pengaturan untuk nomor telepon yang Anda gunakan. Perlu diperhatikan, angka nol (0) pada awalan nomor telepon tidak perlu di tulis atau di ikutsertakan.

  Untuk merubah posisi tombol silakan Anda atur kode CSS diatas, sebagai contoh kode CSS diatas menggunakan default untuk tampilan di tengah layar browser pengguna.
  
  Pengaturan Tombol Tengah Layar :
  left: calc(50% - 2rem);
  bottom: 1rem;
  
  Pengaturan Tombol Di Kiri Layar :
  left: 4rem;
  bottom: 1rem;
  
  Pengaturan Tombol Di Kanan Layar :
  right: 4rem;
  bottom: 1rem;
  

  Tombol telepon ini masih bisa disesuaikan tampilannya melalui pengaturan kode CSS, silakan Anda atur sendiri agar bisa sesuai dengan preferensi tema blog yang Anda gunakan.

Demikian artikel blog tentang Cara Membuat Link Tombol Langsung Telepon Otomatis Di Blog terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

script code here...