Button Minimalis yang Keren

Button Minimalis yang Keren

Button Minimalis yang Keren

infoalya.com

.::infoalya.com::. - Assalamu'alaikum sahabat infoalya.com pada kesempatan ini admin akan berbagi tips untuk mempercantik button di blog sahabat semua, dibawah ini langkah-langkahnya :)
Masuk di template editor dan temukan ]]></b:skin>  lalu letakkan kode dibawah ini tepat diatasnya
.tombol
{       
display: inline-block;
white-space: nowrap;
background-color: #ddd;
background-image: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#ccc));
background-image: -webkit-linear-gradient(top, #eee, #ccc);
background-image: -moz-linear-gradient(top, #eee, #ccc);
background-image: -ms-linear-gradient(top, #eee, #ccc);
background-image: -o-linear-gradient(top, #eee, #ccc);
background-image: linear-gradient(top, #eee, #ccc);
border: 1px solid #777;
padding: 0 1.5em;
margin: 0.5em;
font: bold 1em/2em Arial, Helvetica;
text-decoration: none;
color: #333;
text-shadow: 0 1px 0 rgba(255,255,255,.8);
-moz-border-radius: .2em;
-webkit-border-radius: .2em;
border-radius: .2em;
-moz-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
-webkit-box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
box-shadow: 0 0 1px 1px rgba(255,255,255,.8) inset, 0 1px 0 rgba(0,0,0,.3);
}
  
.tombol:hover
{
background-color: #eee;       
background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(#ddd));
background-image: -webkit-linear-gradient(top, #fafafa, #ddd);
background-image: -moz-linear-gradient(top, #fafafa, #ddd);
background-image: -ms-linear-gradient(top, #fafafa, #ddd);
background-image: -o-linear-gradient(top, #fafafa, #ddd);
background-image: linear-gradient(top, #fafafa, #ddd);
}
  
.tombol:active
{
-moz-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
-webkit-box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
box-shadow: 0 0 4px 2px rgba(0,0,0,.3) inset;
position: relative;
top: 1px;
}
  
.tombol:focus
{
outline: 0;
background: #fafafa;
}   
  
.tombol:before
{
background: #ccc;
background: rgba(0,0,0,.1);
float: left;       
width: 1em;
text-align: center;
font-size: 1.5em;
margin: 0 1em 0 -1em;
padding: 0 .2em;
-moz-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-webkit-box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
box-shadow: 1px 0 0 rgba(0,0,0,.5), 2px 0 0 rgba(255,255,255,.5);
-moz-border-radius: .15em 0 0 .15em;
-webkit-border-radius: .15em 0 0 .15em;
border-radius: .15em 0 0 .15em;   
pointer-events: none; 
}

/* Buttons and inputs */

tombol.tombol, input.tombol
{
cursor: pointer;
overflow: visible; /* removes extra side spacing in IE */
}

/* removes extra inner spacing in Firefox */
 tombol::-moz-focus-inner
{
border: 0;
padding: 0;
}

/* If line-height can't be modified, then fix Firefox spacing with padding */
input::-moz-focus-inner
{
padding: .4em;
}
/* The disabled styles */
.tombol[disabled], .tombol[disabled]:hover, .tombol.disabled, .tombol.disabled:hover
{
background: #eee;
color: #aaa;
border-color: #aaa;
cursor: default;
text-shadow: none;
position: static;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none; 
}
  
/* Hexadecimal entities for the icons */
  
.add:before
{
content: "\271A";
}
  
.edit:before
{
content: "\270E";       
}
  
.delete:before
{
content: "\2718";       
}
  
.save:before
{
content: "\2714";       
}
  
.email:before
{
content: "\2709";       
}
  
.download:before
{
content: "\21d3";       
}
  
.next:before
{
content: "\279C";
}
  
.star:before
{
content: "\2605";
}
.external:before
{
content: "\2197";
}
  
.play:before
{
content: "\25B6";
}


Jika sudah selesai, sekarang untuk memanggilnya gunakan kode dibawah ini
<a href="#" class="tombol">Button</a>
<a href="#" class="tombol add">Add</a>
<a href="#" class="tombol edit">Edit</a>
<a href="#" class="tombol delete">Delete</a>
<a href="#" class="tombol save">Save</a>
<a href="#" class="tombol email">Send email</a>
<a href="#" target="_blank" class="tombol download">Download</a>
<a href="#" class="tombol next">Next</a>
<a href="#" class="tombol star">Favourite</a>
<a href="#" target="_blank" class="tombol external">external link</a>
<a href="#" class="tombol play">Play</a>

untuk demonya bisa pada link dibawah ini.

D E M O


Selamat mencoba.

Share On:

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

[+] Silahkan tinggalkan komentar
[+] Berkomertarlah dengan santun
[+] Mohon tidak meninggalkan live link
[+] Terima kasih untuk komentar anda

https://infoalya.com

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - https://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Info Alya? Keep us running by whitelisting Info Alya in your ad blocker.

This is how to whitelisting Info Alya in your ad blocker.

Thank you!

×
×
×