Memberi Efek Hover Button Dengan CSS

Hai semuanya, Kali ini mimin bakal Share Bagaimana Caranya Memberi Efek Hover Button dengan CSS.

Langsung Saja Kalian Copy Kode CSS Berikut Ini

.tombols {

  background:#008080;

  padding:2px 2px;

  margin:2px;

  border:2px solid #EEE;

  color:#FFF;

  display: inline-block;

  vertical-align: middle;

  -webkit-transform: translateZ(0);

  transform: translateZ(0);

  box-shadow: 0 0 1px rgba(0, 0, 0, 0);

  -webkit-backface-visibility: hidden;

  backface-visibility: hidden;

  -moz-osx-font-smoothing: grayscale;

  position: relative;

  -webkit-transition-property: color;

  transition-property: color;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

}

.tombols:before {

  content: "";

  position: absolute;

  z-index: -1;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: #6F0400;

  -webkit-transform: scaleX(0);

  transform: scaleX(0);

  -webkit-transform-origin: 100% 50%;

  transform-origin: 100% 50%;

  -webkit-transition-property: transform;

  transition-property: transform;

  -webkit-transition-duration: 0.3s;

  transition-duration: 0.3s;

  -webkit-transition-timing-function: ease-out;

  transition-timing-function: ease-out;

}

.tombols:hover, .tombols:focus, .tombols:active {

  color: #FFF;

}

.tombols:hover:before, .tombols:focus:before, .tombols:active:before {

  -webkit-transform: scaleX(1);

  transform: scaleX(1);

}

Letakkan Kode CSS Nya dibawah tag <style>.
Kemudian Kita Buat Button HTML nya. Berikut kode HTML nya.

<button type="submit" name="download" value="#" class="tombols">Download</button>

Dan hasil nya akan Seperti Dibawah Ini.

Sekian Dulu Yah Postingan Kali ini, semoga Bermanfaat.