contact

Contact Person
Pin BB : 5AB31960
SMS : 082288467823
WA : 081275371724
call : 081275668074


Membuat Tombol / Button Elegan dengan CSS

Posted in HTML & CSS Life at 12 Maret 2016 With 0 Comments

membuat button dengan css

Pada kesempatan kali ini suckittrees dot com akan berbagi Cara Membuat Button Keren dengan CSS, Dengan Memanfaatkan style google material yang ada, dsini kita bisa membuat efek animasi button saat button di Klik.

▼ Download Source Code Dibawah Ini ▼



Oy.. Yang belum membaca artikel sebelumnya silahkan dibaca ya ,

Simple Responsive Pure CSS Tabs

Ok.. Mari kita mulai membuat Tombol / Button Keren dengan CSS dan HTML

HTML CODE

<div class="container">
    <div class="button-container">
    <button type="submit" class="button"><span>Submit</span></button>
  </div>
</div>

CSS Code

<style>
@import url(http://fonts.googleapis.com/css?family=Roboto);
/*--------------------------------Button starts--------------------------------*/
.button-container {
  text-align: center;
}
.button {
  position: relative;
  background: currentColor;
  border: 1px solid currentColor;
  font-size: 1.1rem;
  color: #D81900;
  margin: 3rem 0;
  padding: 0.75rem 3rem;
  cursor: pointer;
  -webkit-transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  transition: background-color 0.28s ease, color 0.28s ease, box-shadow 0.28s ease;
  overflow: hidden;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.button span {
  color: #fff;
  position: relative;
  z-index: 1;
}
.button::before {
  content: '';
  position: absolute;
  background: #071017;
  border: 50vh solid #1d4567;
  width: 30vh;
  height: 30vh;
  border-radius: 50%;
  display: block;
  top: 50%;
  left: 50%;
  z-index: 0;
  opacity: 1;
  -webkit-transform: translate(-50%, -50%) scale(0);
          transform: translate(-50%, -50%) scale(0);
}
.button:hover {
  color: #D81900;
  box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
}
.button:active::before, .button:focus::before {
  -webkit-transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s;
  transition: transform 1.12s ease, opacity 0.28s ease 0.364s, -webkit-transform 1.12s ease;
  -webkit-transform: translate(-50%, -50%) scale(1);
          transform: translate(-50%, -50%) scale(1);
  opacity: 0;
}
.button:focus {
  outline: none;
}
/*--------------------------------Button ends--------------------------------*/
</style>

 Anda dapat mengubah warna sesai dengan keinginan anda, Semoga artikel Cara Membuat button dengan css ini dapat berguna.

Demo Download

Artikel Terkait

Diskusi