Html button dengan efek slider

 Membuat HTML tombol button group dengan efek slider, atau bisa disebut juga html slanker Buton. Di bawah ini cara membuat HTML button group menggunakan efek slider yang bisa digeser ke kiri dan ke kanan secara manual.

Di bawah ini langkah cara membuat sebuah button group yang dapat digeser ke kiri dan ke kanan menggunakan HTML.

<style>

.slider {

  width: 100%;

  text-align: center;

  overflow: hidden;

  margin: 0px;

}

.slides {

  display: flex;

  overflow-x: auto;

  scroll-snap-type: x mandatory;

  scroll-behavior: smooth;

  -webkit-overflow-scrolling: touch;

}

.slides::-webkit-scrollbar { width: 3px; height: 3px; }

.slides::-webkit-scrollbar-thumb { background: transparent; border-radius: 5px; }

.slides::-webkit-scrollbar-track { background: transparent; }

.slides > div {

  scroll-snap-align: start;

  flex-shrink: 0;

  width: auto;

  height: 30px;

  margin: 0 10px 0 10px;

  border-radius: 7px;

  background-image: linear-gradient(180deg, #65736e 0, #586d68 12.5%, #496763 25%, #37605d 37.5%, #1f5959 50%, #005156 62.5%, #004a54 75%, #004453 87.5%, #003d52 100%);

  transform-origin: center center;

  transform: scale(1);

  transition: transform 0.5s;

  position: relative;

  border: 1px solid #555;

  display: flex;

  justify-content: center;

  align-items: center;

  overflow: hidden;

  font-size: 100%;

color:#fff;

}

</style>

Kemudian silakan pasang kode html di bawah ini 

<div class="slider">

  <div class="slides">

    <div><a href="https://sugehjek.blogspot.com/search/label/Seputar%20techno">&nbsp; Seputar Techno &nbsp;</a></div>

<div><a href="https://sugehjek.blogspot.com/search/label/Seputar%20blog?m=1">&nbsp; Seputar Blog &nbsp;</a></div>

<div><a href="https://www.google.com/search?q=site%3Ahttps%3A%2F%2Fsugehjek.blogspot.com&oq=&aqs=chrome.3.69i58j69i177j69i64j35i39i362i523l12.-1j0j4&client=ms-android-evercoss&sourceid=chrome-mobile&ie=UTF-8">&nbsp; Index Favorite &nbsp;</a></div>

<div><a href="https://www.blogger.com/profile/11180181528771757555">&nbsp; Profil Blog &nbsp;</a></div>

  </div>

</div>

Click demo untuk melihat atau click download untuk mengunduh semua file