Halaman

    Social Items



Membuat Tombol Demo dan Download Dengan Mudah Bagian 1 - Sesuai dengan judul, di sini onbloging mau share ke kamu bagaimana cara membuat tombol demo dan download untuk blog.

Sebelumnya onbloging sudah memberikan cara membuat tombol nya, silahkan baca Cara Membuat Button. Pada artikel ini onbloging hanya memberikan CSS nya saja, silahkan jika ingin tombol nya aktif bisa kamu modif lagi dan tambahkan kode href nya yah...


Langkah-langkahnya :

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


.buttons-coll {
  width: 90%;
  margin: 50px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
/**** BTN No. 1 ****/
.btn-1 {
  border: 2px solid #000;
}
.btn-1:hover {
  background: #000;
  color: #fff;
}
.btn-1:active {
  top: 2px;
}

/**** BTN No. 2 ****/
.btn-2 {
  border: none;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
}
.btn-2:before,
.btn-2:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:after {
  width: 0%;
  height: 2px;
}
.btn-2:hover:before {
  height: 100%;
}
.btn-2:hover:after {
  width: 100%;
}

/**** BTN No. 3 ****/
.btn-3 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}

/**** BTN No. 4 ****/
.btn-4 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-4:before,
.btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4:before {
  height: 50%;
  width: 2px;
}
.btn-4:after {
  width: 20%;
  height: 2px;
}
.btn-4:hover:before {
  height: 100%;
}
.btn-4:hover:after {
  width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4 span:before {
  width: 2px;
  height: 50%;
}
.btn-4 span:after {
  width: 20%;
  height: 2px;
}
.btn-4 span:hover:before {
  height: 100%;
}
.btn-4 span:hover:after {
  width: 100%;
}

/**** BTN No. 5 ****/
.btn-5 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-5 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-5:before,
.btn-5:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-5:before {
  height: 50%;
  width: 2px;
}
.btn-5:after {
  width: 20%;
  height: 2px;
}
.btn-5:hover:before {
  height: 100%;
}
.btn-5:hover:after {
  width: 100%;
}
.btn-5 span:before,
.btn-5 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-5 span:before {
  width: 2px;
  height: 50%;
}
.btn-5 span:after {
  width: 20%;
  height: 2px;
}
.btn-5 span:hover:before {
  height: 100%;
}
.btn-5 span:hover:after {
  width: 100%;
}

/**** BTN No. 6 ****/
.btn-6 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-6:before,
.btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  background: #000;
}
.btn-6:before {
  right: 0;
  top: 0;
  transition: all 0.1s ease;
}
.btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 0.1s 0.2s ease;
}
.btn-6:hover:before {
  transition: all 0.1s 0.2s ease;
  height: 100%;
}
.btn-6:hover:after {
  transition: all 0.1s ease;
  height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {
  position: absolute;
  content: "";
  background: #000;
}
.btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 0.1s 0.1s ease;
}
.btn-6 span:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
}
.btn-6 span:hover:before {
  width: 100%;
}

/**** BTN No. 7 ****/
.btn-7 {
  border: 2px solid #000;
  transition: all 0.3s ease;
  background: #f2f2f2;
}
.btn-7:before {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  left: -15%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-7:hover {
  background: #000;
  color: #fff;
  border-color: #000;
  padding-left: 30px;
  padding-right: 20px;
}
.btn-7:hover:before {
  left: -10%;
}

/**** BTN No. 8 ****/
.btn-8 {
  padding-left: 30px;
  padding-right: 20px;
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-8:before {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  left: -10%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-8:hover {
  background: #000;
  color: #fff;
  border-color: transparent;
  padding-left: 25px;
  padding-right: 25px;
}
.btn-8:hover:before {
  left: -15%;
}

/**** BTN No. 9 ****/
.btn-9 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-9:before,
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-9:before {
  left: -10%;
}
.btn-9:after {
  right: -10%;
}
.btn-9:hover {
  background: #000;
  color: #fff;
}
.btn-9:hover:before {
  left: -15%;
}
.btn-9:hover:after {
  right: -15%;
}

/**** BTN No. 10 ****/
.btn-10 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-10:before,
.btn-10:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-10:before {
  left: -15%;
}
.btn-10:after {
  right: -15%;
}
.btn-10:hover {
  background: #000;
  color: #fff;
}
.btn-10:hover:before {
  left: -10%;
}
.btn-10:hover:after {
  right: -10%;
}

/**** BTN No. 11 ****/
.btn-11 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-11:before,
.btn-11:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-11:before {
  left: -10%;
}
.btn-11:after {
  right: -10%;
}
.btn-11:hover {
  background: #000;
  color: #fff;
}
.btn-11:hover:before {
  left: 0%;
}
.btn-11:hover:after {
  right: 0%;
}


/**** BTN No. 12 ****/
.btn-12 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-12:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-12:hover {
  color: #fff;
}
.btn-12:hover:after {
  top: 0;
  height: 100%;
}
.btn-12:active {
  top: 2px;
}


/**** BTN No. 13 ****/
.btn-13 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}

/**** BTN No. 14 ****/
.btn-14 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: #fff;
}
.btn-14:hover:after {
  left: 0;
  width: 100%;
}
.btn-14:active {
  top: 2px;
}


/**** BTN No. 15 ****/
.btn-15 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}

Penerapannya :


<div class="buttons-coll">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
  <button class="custom-btn btn-3"><span>Read More</span></button>
  <button class="custom-btn btn-4"><span>Read More</span></button>
  <button class="custom-btn btn-5"><span>Read More</span></button>
  <button class="custom-btn btn-6"><span>Read More</span></button>
  <button class="custom-btn btn-7">Read More</button>
  <button class="custom-btn btn-8">Read More</button>
  <button class="custom-btn btn-9">Read More</button>
  <button class="custom-btn btn-10">Read More</button>
  <button class="custom-btn btn-11">Read More</button>
  <button class="custom-btn btn-12">Read More</button>
  <button class="custom-btn btn-13">Read More</button>
  <button class="custom-btn btn-14">Read More</button>
  <button class="custom-btn btn-15">Read More</button>
</div>

Sumber : ahmedbeheiry

Membuat Tombol Demo dan Download Dengan Mudah Bagian 1



Membuat Tombol Demo dan Download Dengan Mudah Bagian 1 - Sesuai dengan judul, di sini onbloging mau share ke kamu bagaimana cara membuat tombol demo dan download untuk blog.

Sebelumnya onbloging sudah memberikan cara membuat tombol nya, silahkan baca Cara Membuat Button. Pada artikel ini onbloging hanya memberikan CSS nya saja, silahkan jika ingin tombol nya aktif bisa kamu modif lagi dan tambahkan kode href nya yah...


Langkah-langkahnya :

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


.buttons-coll {
  width: 90%;
  margin: 50px auto;
  text-align: center;
}
button {
  margin: 20px;
}
.custom-btn {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}
/**** BTN No. 1 ****/
.btn-1 {
  border: 2px solid #000;
}
.btn-1:hover {
  background: #000;
  color: #fff;
}
.btn-1:active {
  top: 2px;
}

/**** BTN No. 2 ****/
.btn-2 {
  border: none;
  border-bottom: 2px solid #000;
  border-left: 2px solid #000;
}
.btn-2:before,
.btn-2:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-2:before {
  height: 0%;
  width: 2px;
}
.btn-2:after {
  width: 0%;
  height: 2px;
}
.btn-2:hover:before {
  height: 100%;
}
.btn-2:hover:after {
  width: 100%;
}

/**** BTN No. 3 ****/
.btn-3 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-3 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-3:before,
.btn-3:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-3:before {
  height: 0%;
  width: 2px;
}
.btn-3:after {
  width: 0%;
  height: 2px;
}
.btn-3:hover:before {
  height: 100%;
}
.btn-3:hover:after {
  width: 100%;
}
.btn-3 span:before,
.btn-3 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-3 span:before {
  width: 2px;
  height: 0%;
}
.btn-3 span:after {
  width: 0%;
  height: 2px;
}
.btn-3 span:hover:before {
  height: 100%;
}
.btn-3 span:hover:after {
  width: 100%;
}

/**** BTN No. 4 ****/
.btn-4 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-4 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-4:before,
.btn-4:after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4:before {
  height: 50%;
  width: 2px;
}
.btn-4:after {
  width: 20%;
  height: 2px;
}
.btn-4:hover:before {
  height: 100%;
}
.btn-4:hover:after {
  width: 100%;
}
.btn-4 span:before,
.btn-4 span:after {
  position: absolute;
  content: "";
  left: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-4 span:before {
  width: 2px;
  height: 50%;
}
.btn-4 span:after {
  width: 20%;
  height: 2px;
}
.btn-4 span:hover:before {
  height: 100%;
}
.btn-4 span:hover:after {
  width: 100%;
}

/**** BTN No. 5 ****/
.btn-5 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-5 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-5:before,
.btn-5:after {
  position: absolute;
  content: "";
  right: 0;
  bottom: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-5:before {
  height: 50%;
  width: 2px;
}
.btn-5:after {
  width: 20%;
  height: 2px;
}
.btn-5:hover:before {
  height: 100%;
}
.btn-5:hover:after {
  width: 100%;
}
.btn-5 span:before,
.btn-5 span:after {
  position: absolute;
  content: "";
  left: 0;
  top: 0;
  background: #000;
  transition: all 0.3s ease;
}
.btn-5 span:before {
  width: 2px;
  height: 50%;
}
.btn-5 span:after {
  width: 20%;
  height: 2px;
}
.btn-5 span:hover:before {
  height: 100%;
}
.btn-5 span:hover:after {
  width: 100%;
}

/**** BTN No. 6 ****/
.btn-6 {
  width: 130px;
  height: 40px;
  line-height: 42px;
  padding: 0;
  border: none;
}
.btn-6 span {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}
.btn-6:before,
.btn-6:after {
  position: absolute;
  content: "";
  height: 0%;
  width: 2px;
  background: #000;
}
.btn-6:before {
  right: 0;
  top: 0;
  transition: all 0.1s ease;
}
.btn-6:after {
  left: 0;
  bottom: 0;
  transition: all 0.1s 0.2s ease;
}
.btn-6:hover:before {
  transition: all 0.1s 0.2s ease;
  height: 100%;
}
.btn-6:hover:after {
  transition: all 0.1s ease;
  height: 100%;
}
.btn-6 span:before,
.btn-6 span:after {
  position: absolute;
  content: "";
  background: #000;
}
.btn-6 span:before {
  left: 0;
  top: 0;
  width: 0%;
  height: 2px;
  transition: all 0.1s 0.1s ease;
}
.btn-6 span:after {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
}
.btn-6 span:hover:before {
  width: 100%;
}

/**** BTN No. 7 ****/
.btn-7 {
  border: 2px solid #000;
  transition: all 0.3s ease;
  background: #f2f2f2;
}
.btn-7:before {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  left: -15%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-7:hover {
  background: #000;
  color: #fff;
  border-color: #000;
  padding-left: 30px;
  padding-right: 20px;
}
.btn-7:hover:before {
  left: -10%;
}

/**** BTN No. 8 ****/
.btn-8 {
  padding-left: 30px;
  padding-right: 20px;
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-8:before {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  left: -10%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-8:hover {
  background: #000;
  color: #fff;
  border-color: transparent;
  padding-left: 25px;
  padding-right: 25px;
}
.btn-8:hover:before {
  left: -15%;
}

/**** BTN No. 9 ****/
.btn-9 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-9:before,
.btn-9:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-9:before {
  left: -10%;
}
.btn-9:after {
  right: -10%;
}
.btn-9:hover {
  background: #000;
  color: #fff;
}
.btn-9:hover:before {
  left: -15%;
}
.btn-9:hover:after {
  right: -15%;
}

/**** BTN No. 10 ****/
.btn-10 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-10:before,
.btn-10:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-10:before {
  left: -15%;
}
.btn-10:after {
  right: -15%;
}
.btn-10:hover {
  background: #000;
  color: #fff;
}
.btn-10:hover:before {
  left: -10%;
}
.btn-10:hover:after {
  right: -10%;
}

/**** BTN No. 11 ****/
.btn-11 {
  background: #f2f2f2;
  border: 2px solid #000;
  transition: all 0.3s ease;
}
.btn-11:before,
.btn-11:after {
  position: absolute;
  content: " ";
  z-index: -1;
  width: 25%;
  top: 50%;
  height: 2px;
  background: #000;
  transition: all 0.3s ease;
}
.btn-11:before {
  left: -10%;
}
.btn-11:after {
  right: -10%;
}
.btn-11:hover {
  background: #000;
  color: #fff;
}
.btn-11:hover:before {
  left: 0%;
}
.btn-11:hover:after {
  right: 0%;
}


/**** BTN No. 12 ****/
.btn-12 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-12:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  bottom: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-12:hover {
  color: #fff;
}
.btn-12:hover:after {
  top: 0;
  height: 100%;
}
.btn-12:active {
  top: 2px;
}


/**** BTN No. 13 ****/
.btn-13 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-13:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 0;
  top: 0;
  left: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-13:hover {
  color: #fff;
}
.btn-13:hover:after {
  top: auto;
  bottom: 0;
  height: 100%;
}
.btn-13:active {
  top: 2px;
}

/**** BTN No. 14 ****/
.btn-14 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-14:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  right: 0;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-14:hover {
  color: #fff;
}
.btn-14:hover:after {
  left: 0;
  width: 100%;
}
.btn-14:active {
  top: 2px;
}


/**** BTN No. 15 ****/
.btn-15 {
  border: 2px solid #000;
  z-index: 1;
}
.btn-15:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  background: #000;
  transition: all 0.3s ease;
}
.btn-15:hover {
  color: #fff;
}
.btn-15:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}
.btn-15:active {
  top: 2px;
}

Penerapannya :


<div class="buttons-coll">
  <button class="custom-btn btn-1">Read More</button>
  <button class="custom-btn btn-2">Read More</button>
  <button class="custom-btn btn-3"><span>Read More</span></button>
  <button class="custom-btn btn-4"><span>Read More</span></button>
  <button class="custom-btn btn-5"><span>Read More</span></button>
  <button class="custom-btn btn-6"><span>Read More</span></button>
  <button class="custom-btn btn-7">Read More</button>
  <button class="custom-btn btn-8">Read More</button>
  <button class="custom-btn btn-9">Read More</button>
  <button class="custom-btn btn-10">Read More</button>
  <button class="custom-btn btn-11">Read More</button>
  <button class="custom-btn btn-12">Read More</button>
  <button class="custom-btn btn-13">Read More</button>
  <button class="custom-btn btn-14">Read More</button>
  <button class="custom-btn btn-15">Read More</button>
</div>

Sumber : ahmedbeheiry

No comments

Silahkan komentar sesuai dengan topik yang di bahas sesuai artikel