contact
WA: 0822-8846-7823
SMS: 0822-8846-7823
Call: 0822-8846-7823
BBM: D7DB3491
ebsofmail@gmail.com

Membuat Tombol / Button Elegan dengan CSS

Posted in HTML & CSS Life at 15 November 2019 With 0 Comments


OK.. artikel ini saya update ya..  Dalam artikel ini kita akan Membuat 5 Jenis Button dengan Berbagai animasi dan warna serta bentuk yang berbeda tampilannya... karena css3 yang semakin berkembang.. dan banyak button style yang bisa dibuat, disini saya akan update berbagai jenis button dengan css3 , semoga ini dapat bermanfaat, dan menjadikan pilihan bagi temen-temen untuk sekiranya digunakan sesuai dengan keinginan dan kesukaan nya.

Berbicara masalah style button, tentu bukanlah hal paten, style tergantung terhadap kesukaan seseorang , jadi tidak ada tolak ukur yang pasti, ada yang lebih memilih Simple button dengan link dengan warna yang elegen namun efek sederhana ada juga yang menginginkan button link dengan efek dan warna slide yang vulgar... heee...

Ok... disimak saja ya..

Style Button Border dengan Efek h:over red

membuat design tombol dengan css3

Demo


HTML CODE :

<!-- partial:index.partial.html -->
<a href="https://suckittrees.com/artikel-108/membuat-tombol--button-elegan-dengan-css.html" target="_SELF">
<h1>Style Button Suckittrees.com</h1></a>

<button class="btn first">Button 1</button>

<a href="#" class="btn first">Button 1</a>

<!-- partial -->

CSS CODE :


.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}

.first {
  transition: box-shadow 300ms ease-in-out, color 300ms ease-in-out;
}
.first:hover {
  box-shadow: 0 0 40px 40px #e74c3c inset;
}

Style Button Border dengan Efek Garis Vertikal

style button dengan css3

Demo

HTML CODE :

<!-- partial:index.partial.html -->
<a href="https://suckittrees.com/artikel-108/membuat-tombol--button-elegan-dengan-css.html" target="_SELF">
<h1>Style Button Suckittrees.com</h1></a>

<button class="btn second">Button 2</button>

<a href="#" class="btn second">Button 2</a>

<!-- partial -->

CSS CODE :


.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.second {
  border-radius: 3em;
  border-color: #1abc9c;
  color: #fff;
  background-image: linear-gradient(to right, rgba(26, 188, 156, 0.6), rgba(26, 188, 156, 0.6) 5%, #1abc9c 5%, #1abc9c 10%, rgba(26, 188, 156, 0.6) 10%, rgba(26, 188, 156, 0.6) 15%, #1abc9c 15%, #1abc9c 20%, rgba(26, 188, 156, 0.6) 20%, rgba(26, 188, 156, 0.6) 25%, #1abc9c 25%, #1abc9c 30%, rgba(26, 188, 156, 0.6) 30%, rgba(26, 188, 156, 0.6) 35%, #1abc9c 35%, #1abc9c 40%, rgba(26, 188, 156, 0.6) 40%, rgba(26, 188, 156, 0.6) 45%, #1abc9c 45%, #1abc9c 50%, rgba(26, 188, 156, 0.6) 50%, rgba(26, 188, 156, 0.6) 55%, #1abc9c 55%, #1abc9c 60%, rgba(26, 188, 156, 0.6) 60%, rgba(26, 188, 156, 0.6) 65%, #1abc9c 65%, #1abc9c 70%, rgba(26, 188, 156, 0.6) 70%, rgba(26, 188, 156, 0.6) 75%, #1abc9c 75%, #1abc9c 80%, rgba(26, 188, 156, 0.6) 80%, rgba(26, 188, 156, 0.6) 85%, #1abc9c 85%, #1abc9c 90%, rgba(26, 188, 156, 0.6) 90%, rgba(26, 188, 156, 0.6) 95%, #1abc9c 95%, #1abc9c 100%);
  background-position: 0 0;
  background-size: 100%;
  transition: background 300ms ease-in-out;
}
.second:hover {
  background-position: 100px;
}

STYLE BUTTON BLUE COLOUR LIGHT

style link button dengan css3

Demo

HTML CODE :

<!-- partial:index.partial.html -->
<a href="https://suckittrees.com/artikel-108/membuat-tombol--button-elegan-dengan-css.html" target="_SELF">
<h1>Style Button Suckittrees.com</h1></a>
<button class="btn third">Button 3</button>

<a href="#" class="btn third">Button 3</a>

<!-- partial -->

CSS CODE :


.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.third {
  border-color: #3498db;
  color: #fff;
  box-shadow: 0 0 40px 40px #3498db inset, 0 0 0 0 #3498db;
  transition: all 150ms ease-in-out;
}
.third:hover {
  box-shadow: 0 0 10px 0 #3498db inset, 0 0 10px 4px #3498db;
}

Style Button Yellow Colour H : OVER Style

style link button dengan css3

Demo

HTML CODE :

<!-- partial:index.partial.html -->
<a href="https://suckittrees.com/artikel-108/membuat-tombol--button-elegan-dengan-css.html" target="_SELF">
<h1>Style Button Suckittrees.com</h1></a>
<button class="btn fourth">Button 4</button>

<a href="#" class="btn fourth">Button 4</a>

<!-- partial -->

CSS CODE :


.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.fourth {
  border-color: #f1c40f;
  color: #fff;
  background-image: linear-gradient(45deg, #f1c40f 50%, transparent 50%);
  background-position: 100%;
  background-size: 400%;
  transition: background 300ms ease-in-out;
}
.fourth:hover {
  background-position: 0;
}

Style Button Yellow Colour H : OVER Style

style link button purple animated css3

Demo

HTML CODE :

<!-- partial:index.partial.html -->
<a href="https://suckittrees.com/artikel-108/membuat-tombol--button-elegan-dengan-css.html" target="_SELF">
<h1>Style Button Suckittrees.com</h1></a>
<button class="btn fifth">Button 5</button>

<a href="#" class="btn fifth">Button 5</a>

<!-- partial -->

CSS CODE :


.btn {
  box-sizing: border-box;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  background-color: transparent;
  border: 2px solid #e74c3c;
  border-radius: 0.6em;
  color: #e74c3c;
  cursor: pointer;
  display: flex;
  align-self: center;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  margin: 20px;
  padding: 1.2em 2.8em;
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
}
.btn:hover, .btn:focus {
  color: #fff;
  outline: 0;
}
.fifth {
  border-color: #8e44ad;
  border-radius: 0;
  color: #8e44ad;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 150ms ease-in-out;
}
.fifth:after {
  content: '';
  position: absolute;
  display: block;
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 0;
  height: 100%;
  background: #8e44ad;
  z-index: -1;
  transition: width 150ms ease-in-out;
}
.fifth:hover {
  color: #fff;
}
.fifth:hover:after {
  width: 110%;
}

Style Button Google Material Design

membuat button dengan css

Cara Membuat Button Keren dengan CSS, Dengan Memanfaatkan style google material yang ada, dsini kita bisa membuat efek animasi button saat button di Klik.

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

Bagi Member di Suckittrees.Com , silahkan download keseluruhan file nya disini

Download

Artikel Rekomendasi

Artikel Terkait

Diskusi