Membuat Soft UI CSS Button

CSS Membuat Soft UI CSS Button
Soft UI CSS Button
Soft UI CSS Button

Candil.eu.org. - Hallo Programmer kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat tampilan Soft UI CSS Button, sebuah tutorial pemrograman dasar hanya menggunakan CSS dan HTML yang bisa dijadikan refferensi pembelajaran untuk anda para pengunjung setia blog dan juga youtube channel Candil Code, Silahkan di simak dan perhatikan baik-baik code HTML dan CSSt yang sudah saya sediakan di bawah ini.

Cara Membuat Soft UI CSS Button

<head>
<link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
<link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet">
</head>

<body>
  <h1>Animated Social Media Buttons CSS on Hover</h1>
    <div class="wrapper">
      <div class="button">
        <div class="icon">
<i class="fab fa-facebook-f"></i></div>
<span>Facebook</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-twitter"></i></div>
<span>Twitter</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-dribbble"></i></div>
<span>dribbble</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-github"></i></div>
<span>Github</span>
      </div>
<div class="button">
        <div class="icon">
<i class="fab fa-youtube"></i></div>
<span>YouTube</span>
      </div>
</div>
  <p>Candil Kuya</p>
</body>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Lato', sans-serif;
}
html,body{
  display: grid;
  height: 100%;
  width: 100%;
  place-items: center;
  background: #e0e5ec;
}
.wrapper .button{
  display: inline-block;
  height: 60px;
  width: 60px;
  float: left;
  margin: 0 5px;
  overflow: hidden;
  color: #fff;
  border-radius: 50px;
  cursor: pointer;
  box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5),
    inset -7px -7px 10px 0px rgba(0,0,0,.1),7px 7px 20px 0px rgba(0,0,0,.1),
   4px 4px 5px 0px rgba(0,0,0,.1);
  text-shadow:  2px 2px 3px rgba(255,255,255,.5),
              -4px -4px 6px rgba(116, 125, 136, .2);
  transition: all 0.3s ease-out;
}
.wrapper .button:hover{
  width: 200px;
}
.wrapper .button .icon{
  display: inline-block;
  height: 60px;
  width: 60px;
  text-align: center;
  border-radius: 50px;
  box-sizing: border-box;box-shadow: inherit;
  box-shadow: inherit;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) .icon{
  background: #4267B2;
}
.wrapper .button:nth-child(2) .icon{
  background: #1DA1F2;
}
.wrapper .button:nth-child(3) .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4) .icon{
  background: #333;
}
.wrapper .button:nth-child(5) .icon{
  background: #ff0000;
}

.wrapper .button:nth-child(1):hover .icon{
  background: #4267B2;
}
.wrapper .button:nth-child(2):hover .icon{
  background: #1DA1F2;
}
.wrapper .button:nth-child(3):hover .icon{
  background: #E1306C;
}
.wrapper .button:nth-child(4):hover .icon{
  background: #333;
}
.wrapper .button:nth-child(5):hover .icon{
  background: #ff0000;
}
.wrapper .button .icon i{
  font-size: 25px;
  line-height: 60px;
  transition: all 0.3s ease-out;
}
.wrapper .button:hover .icon i{
  color: #fff;
}
.wrapper .button span{
  font-size: 20px;
  font-weight: 500;
  line-height: 60px;
  margin-left: 10px;
  transition: all 0.3s ease-out;
}
.wrapper .button:nth-child(1) span{
  color: #4267B2;
}
.wrapper .button:nth-child(2) span{
  color: #1DA1F2;
}
.wrapper .button:nth-child(3) span{
  color: #FB2175;
}
.wrapper .button:nth-child(4) span{
  color: #333;
}
.wrapper .button:nth-child(5) span{
  color: #ff0000;
}
Your_code_is_here

Demo code Soft UI CSS Button

Saya membagikan code ini hanya untuk tujuan pengujian dan pembelajaran. Jika dirasa Artikel Yang saya tulis melanggar Hak Cipta Silahkan kirimkan pesan kepada Saya Melalui Halaman Kontak dan Saya akan menghapusnya sesegera mungkin.

Untuk para pengunjung Blog yang saat ini sedang mencari layanan jasa pembuatan website, anda bisa kunjungi Jasa Candil Kuya di google.

Penutup

Bagaimana sobat Candil cukup mudah bukan? blog ini sengaja saya sediakan khusus untuk anda yang masih pemula di dalam dunia pemrograman, Semoga dapat bermanfaat bagi sobat Candil yang ingin belajar dasar pemrograman seperti HTML, CSS dan Juga Javascript.

Jangan lupa share dan jika ada kekurangan serta koreksi di dalam penulisan code Soft UI CSS Button silahkan tulis melalui kolom komentar di bawah ini ya. Terima kasih!

Autor:
実用性0% 楽しさ100% | 0% Practical 100% Fun 🇯🇵🇨🇦

  • Deskripsi

    Hallo Programmer kembali lagi di blog saya yang sangat sederhana ini, hari ini kita akan belajar web design mebuat tampilan Soft UI CSS Button
  • Tag

    CSS HTML Web Design