Tombol Link Dengan Effect Sudut Halus

Hay sobat blogger bagaimana kabar anda ? baik bukan. Pada artikel kali ini saya akan memberikan tutorial membuat tombol dengan sudut yang tumpul dan halus tanpa background gambar 100% css pasti sobat sudah tidak sabar. Berikut adalah pilihan tombolnya silakan pilih satu atau semuanya.

Button Styles

Modern
 

.modern {
  display: inline-block;
  margin: 10px;
  padding: 8px 15px;
  background: #B8ED01;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 4px;
  transition: all 0.3s ease-out;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2);

  /* Font styles */
  text-decoration: none;
  text-shadow: 0 1px rgba(255,255,255,0.7);
}

.modern:hover  { background: #C7FE0A; }
      
     

Modern embossed

.embossed-link {
  box-shadow: 
    inset 0 3px 2px rgba(255,255,255,.22), 
    inset 0 -3px 2px rgba(0,0,0,.17), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.1), 
    0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.5),
    0 2px 2px rgba(0,0,0,0.3),
    0 0 4px 1px rgba(0,0,0,0.2),
    inset 0 3px 2px rgba(255,255,255,.22), 
    inset 0 -3px 2px rgba(0,0,0,.15), 
    inset 0 20px 10px rgba(255,255,255,.12), 
    0 0 4px 1px rgba(0,0,0,.1), 
    0 3px 2px rgba(0,0,0,.2);
}

.modern.embossed-link:active {
  box-shadow: 
    inset 0 -2px 1px rgba(255,255,255,0.2),
    inset 0 3px 2px rgba(0,0,0,0.12);
}

Modern with socle

.socle {
  position: relative;
  z-index: 2;
}

.socle:after {
  content: "";
  z-index: -1;
  position: absolute;
  border-radius: 6px;
  box-shadow: 
 inset 0 1px 0 rgba(0,0,0,0.1),
 inset 0 -1px 0 rgba(255,255,255,0.7);
  top: -6px; bottom: -6px;
  right: -6px; left: -6px;
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0));
}

* Cara pemasangan :

1. Login akun blogger anda

2. Pilih blog yang dikelola

3. Masuk Ke halaman Template

4. Edit HTML

5. Cari kode ]]>

6. Copy script css yang anda pilih di dalam kotak paste tepat diatas kode ]]>

7. Simpan


* untuk pemasangan ke link :

1. Buat postingan baru

2. Buka HTML bukan compose

3. Masukan kode berikut

Untuk yang ke 1 :

<a href="#" class="modern">Modern</a>


Untuk yang ke 2:

<a href="#" class="modern embossed-link">Modern embossed</a>


Untuk yang ke 3 :

<a href="#" class="modern socle">Modern with socle</a>



Semoga Bermanfaat