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 .
- Masukan kode CSS sebelum kode </style>
- Kode HTML disematkan dalam postingan [ Mode HTML Editor ]
.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.