Halaman

    Social Items



Membuat Tombol Demo dan Download Dengan Mudah Bagian 2 - Seperti yang sudah saya sharing sebelumnya tentang CSS tombol demo, download, read more, dll. Maka saya akan share CSS Style bagian 2.

Silahkan kunjungi Membuat Tombol Demo dan Download Dengan Mudah Bagian 1 untuk referensi lainnya yah.


Langkah-langkahnya :


1. Login Blogger > Tema > Edit Tema > Salin kode CSS di bawah ini tepat di atas kode </style> atau kode ]]></b:skin>

.btn {
  display: inline-block;
  background: #e2e2e2;
  border: 0;
  line-height: 2.5em;
  padding: 0 0 0 1em;
  margin-bottom: 1em;
  outline: none;
  text-decoration: none;
  color: #666;
  
  .arrow {
    display: inline-block;
    line-height: 2.5em;
    text-align: center;
    background: #333;
    color: white;
    font-size: 1em;
    width: 2.5em;
    transition: margin 200ms;
    margin-left: .75em;
  }
  
  &:hover {
    background: white;
    .arrow {
      margin-left: 1.25em;
      background-color: darken(#333,5%);
    } 
  }
  &:active {
    background: #ccc;
    .arrow {
      margin-left: 1.5em;
    } 
  }
}

.btn-info {
  .arrow {
    background-color: indianred;
  }
  &:hover {
    .arrow {
      background-color: desaturate(darken(indianred,5%),5%);
    }
  }
}

.btn-learn {
  .arrow {
    background-color: salmon;
  }
  &:hover {
    .arrow {
      background-color: desaturate(darken(salmon,5%),5%);
    }
  }
}

Penerapannya


Untuk Posisi Kanan

<div class="right">
  <a href="#" class="btn">Submit <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-info">More Info <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-learn">Learn More <span class="arrow">❯</span></a>
  <br />
</div>

Untuk Posisi Kiri

<div class="left">
  <a href="#" class="btn">Submit <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-info">More Info <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-learn">Learn More <span class="arrow">❯</span></a>
  <br />
</div>

Untuk Posisi Tengah

<div class="center">
  <a href="#" class="btn">Submit <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-info">More Info <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-learn">Learn More <span class="arrow">❯</span></a>
  <br />
</div>

Membuat Tombol Demo dan Download Dengan Mudah Bagian 2



Membuat Tombol Demo dan Download Dengan Mudah Bagian 2 - Seperti yang sudah saya sharing sebelumnya tentang CSS tombol demo, download, read more, dll. Maka saya akan share CSS Style bagian 2.

Silahkan kunjungi Membuat Tombol Demo dan Download Dengan Mudah Bagian 1 untuk referensi lainnya yah.


Langkah-langkahnya :


1. Login Blogger > Tema > Edit Tema > Salin kode CSS di bawah ini tepat di atas kode </style> atau kode ]]></b:skin>

.btn {
  display: inline-block;
  background: #e2e2e2;
  border: 0;
  line-height: 2.5em;
  padding: 0 0 0 1em;
  margin-bottom: 1em;
  outline: none;
  text-decoration: none;
  color: #666;
  
  .arrow {
    display: inline-block;
    line-height: 2.5em;
    text-align: center;
    background: #333;
    color: white;
    font-size: 1em;
    width: 2.5em;
    transition: margin 200ms;
    margin-left: .75em;
  }
  
  &:hover {
    background: white;
    .arrow {
      margin-left: 1.25em;
      background-color: darken(#333,5%);
    } 
  }
  &:active {
    background: #ccc;
    .arrow {
      margin-left: 1.5em;
    } 
  }
}

.btn-info {
  .arrow {
    background-color: indianred;
  }
  &:hover {
    .arrow {
      background-color: desaturate(darken(indianred,5%),5%);
    }
  }
}

.btn-learn {
  .arrow {
    background-color: salmon;
  }
  &:hover {
    .arrow {
      background-color: desaturate(darken(salmon,5%),5%);
    }
  }
}

Penerapannya


Untuk Posisi Kanan

<div class="right">
  <a href="#" class="btn">Submit <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-info">More Info <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-learn">Learn More <span class="arrow">❯</span></a>
  <br />
</div>

Untuk Posisi Kiri

<div class="left">
  <a href="#" class="btn">Submit <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-info">More Info <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-learn">Learn More <span class="arrow">❯</span></a>
  <br />
</div>

Untuk Posisi Tengah

<div class="center">
  <a href="#" class="btn">Submit <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-info">More Info <span class="arrow">❯</span></a>
  <br />
  <a href="#" class="btn btn-learn">Learn More <span class="arrow">❯</span></a>
  <br />
</div>

No comments

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel