Membuat Tombol UI Demo Dan Download

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.