Breaking News
random

Membuat Tombol UI Demo Dan Download

di
Jumlah Karakter Title Tag Postingan
Sebenarnya sudah ada beberapa postingan yang disiapkan untuk updetisasi tapi saya belum yakin dengan pembahasan nya makanya dipending dulu .. nah untuk mengisi postingan , kali ini saya akan berbagi cara dalam membuat button / tombol untuk demo dan download  . Button ini sebenarnya lebih cocok untuk blog yang sering share template atau apalah yang berbau demo dan download .

Demosion

Kustomisasi pada blog 

  • Masukan kode CSS sebelum kode </style>
  • Kode HTML disematkan dalam postingan [ Mode HTML Editor ]  
CSS
.ui.button {
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  min-height: 1em;
  outline: none;
  border: none;
  background-color: #FAFAFA;
  color: #808080;
  margin: 0em;
  padding: 0.8em 1.5em;
  font-size: 1rem;
  text-transform: uppercase;
  line-height: 1;
  font-style: normal;
  text-align: center;
  text-decoration: none;
  border-radius: 0.25em;
  box-sizing: border-box;
}
.ui.buttons .active.button,
.ui.active.button {
  background-color: #EAEAEA;
  background-image: none;
  box-shadow: 0px 0px 0px 1px

 rgba(0, 0, 0, 0.05) inset !important;
  color: rgba(0, 0, 0, 0.7);
}
.ui.button:not(.loading):hover {
  background-image: linear-gradient

(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.08));
  color: rgba(0, 0, 0, 0.7);
}
.ui.button.active:hover {
  background-image: none;
}
.ui.button:hover .icon,
.ui.button.hover .icon {
  opacity: 0.85;
}
.ui.button:not(.loading):active,
.ui.active.button:not(.loading):active {
  background-color: #F1F1F1;
  color: rgba(0, 0, 0, 0.7);
  box-shadow: 0px 0px 0px 1px 

rgba(0, 0, 0, 0.05) inset !important;
}
.ui.buttons .or {
  position: relative;
  float: left;
  width: 0.3em;
  height: 1.1em;
  z-index: 3;
}
.ui.buttons .or:before {
  position: absolute;
  top: 50%;
  left: 50%;
  content: 'or';
  background-color: #5a5a5a;
  margin-top: -0.1em;
  margin-left: -0.9em;
  width: 1.8em;
  height: 1.8em;
  line-height: 1.55;
  color: #fff;
  font-style: normal;
  font-weight: normal;
  text-align: center;
  border-radius: 500px;
  box-sizing: border-box;
}
.ui.buttons .or:after {
  position: absolute;
  top: 0em;
  left: 0em;
  content: ' ';
  width: 0.3em;
  height: 1.7em;
  background-color: transparent;
  border-top: 0.5em solid #5a5a5a;
  border-bottom: 0.5em solid #5a5a5a;
}
.ui.positive.buttons .button,
.ui.positive.button {
  background-color: #5BBD72 !important;
  color: #FFFFFF;
}
.ui.positive.buttons .button:hover,
.ui.positive.button:hover,
.ui.positive.buttons .active.button,
.ui.positive.button.active {
  background-color: #58CB73 !important;
  color: #FFFFFF;
}
.ui.positive.buttons .button:active,
.ui.positive.button:active {
  background-color: #4CB164 !important;
  color: #FFFFFF;
}
.ui.buttons {
  display: inline-block;
  vertical-align: middle;
}
.ui.buttons:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

HTML
<div class="ui buttons">
  <div class="ui button">Demosion</div>
  <div class="or"></div>
  <div class="ui positive button">Download</div>
</div>

Silahkan sematkan link pada tulisan yang saya block dan biasanya menggunakan attribut target blank.
  • Contoh [ <a href="URL Tujuan" target="_blank">Link</a>] 
Nah demikian sajian tutorial dalam membuat UI Button Demo Dan Download selebihnya untuk membuat tampilan button lebih menarik saya serahkan pada kreatifitas sobat sendiri.

Artikel Menarik Lainnya :