Membuat Slide Download & Demo Button

Hai sobat wahid emalution. Mungkin sobat asing dengan yang menulis artikel sekarang karena adminnya berbeda dengan sebelumnya.

tetapi saya juga akan membagikan tutorial seputar blog. nah dan pada malam ini saya akan membagikan tutor yang berjudul. Cara Membuat Slide Download & Demo Button.

Saya mengambil css ini dari aisukablog, yang dishare mba kiki. yap langsung saja kita ke tutornya.

Simak baik-baik.

Letakan CSS dibawah ini tepat di atas ]]></b:skin> atau </style>

/* CSS Slide Demo and Download Button */
.download{font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px}
.download h1{font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#20a3cb;transition:margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px}
.download:hover h1{margin-left:100%;opacity:0.7}
.download ul{display:inline-block;margin:0;padding:0}
.download ul li{position:static;display:inline-block;padding:0 .1em}
.download ul li::before{display:none}
.download ul li a{color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease}
.download ul li a:hover{background:#20a3cb;color:#fff;border-radius:2px}
.download-info{background:#1c94b9;box-shadow:0 0 3px rgba(0,0,0,0.3)}
.download-info h1{background-color:#20a3cb}
.demo{font-family:'Oswald';font-weight:400;position:relative;overflow:hidden;text-align:center;margin:1em auto;width:auto;height:50px;line-height:50px;border-radius:3px}
.demo h1{font-family:'Oswald';font-weight:400;position:absolute;color:#fff;text-shadow:2px 2px 0 rgba(0,0,0,0.1);font-size:30px;line-height:50px;margin:0;padding:0;width:100%;background-color:#a3acb2;transition:margin-left 0.6s cubic-bezier(0.1,0.5,0.2,1);border-radius:3px}
.demo:hover h1{margin-left:100%;opacity:0.7}
.demo ul{display:inline-block;margin:0;padding:0}
.demo ul li{position:static;display:inline-block;padding:0 .1em}
.demo ul li::before{display:none}
.demo ul li a{color:#fff;font-size:20px;margin:0;padding:.2em .4em;background:none;transition:all 0.5s ease}
.demo ul li a:hover{background:#a3acb2;color:#fff;border-radius:2px}
.demo-info{background:#8f979c;box-shadow:0 0 3px rgba(0,0,0,0.3)}
.demo-info h1{background-color:#a3acb2}

yap,dan setelah itu cara penulisannya

<div class="download download-info">
  <h1>DOWNLOAD</h1>
  <ul>
    <li>
      <a href="#" target="_blank">DOWNLOAD 1</a>
    </li>
    <li>
      <a href="#" target="_blank">DOWNLOAD 2</a>
    </li>
    <li>
      <a href="#" target="_blank">DOWNLOAD 3</a>
    </li>
    <li>
      <a href="#" target="_blank">DOWNLOAD 4</a>
    </li>
  </ul>
</div>
<div class="demo demo-info">
  <h1>DEMO</h1>
  <ul>
    <li>
      <a href="#" target="_blank">DEMO 1</a>
    </li>

NB: penulisan dibagian HTML bukaan di Compose

Yap begitu saja dari saya, jika ada yang kurang jelas sobat bisa bertanya di kotak komentar.
Terima kasih , semoga membantu.