Membuat Tombol / Button Elegan dengan CSS

Publish Date : 15-11-2019 , dibaca 88903 kali, Hari ini dibaca : 1 kali ,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

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

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

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

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

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

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>