BLOG webstory

Beranda
Blog

Cara membuat tombol download box median ui

blog.webstory.eu.org
Cara membuat tombol download box pada template median ui

Di bawah ini adalah tutorial bagaiman membuat Download Card / Download Box pada Template Median UI v 1.6 dan 1.7

Button-button di bawah ini tidak bisa diklik, hanya untuk contoh saja.

1. Menggunakan Text

Format penulisan :

<div class='dlBox'>
  <!--[ Ganti data-text='...' atribute dengan jenis file ]-->
  <span class='fT' data-text='zip'></span>
  <div class='fN'>
    <!--[ Nama file ]-->
    <span>nama_file.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (ganti href='...' atribute dengan link download) ]-->
  <a class='button' aria-label='Download' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Menggunakan Gambar :

<div class='dlBox'>
  <!--[ Ganti data-text='...' atribute dengan jenis file ]-->
  <span class='fT lazy' data-text='zip' data-style='background-image: url(https://blogger.googleusercontent.com/img/.../image.png)'></span>
  <div class='fN'>
    <!--[ Nama File ]-->
    <span>nama_file.zip</span>
    <span class='fS'>200kb</span>
  </div>
    
  <!--[ Download link (ganti href='...' atribute dengan link download) ]-->
  <a class='button' aria-label='Download' href='your_url'>
    <svg class='line' viewBox='0 0 24 24' stroke-miterlimit='10'><path d='M9.31995 11.6799L11.8799 14.2399L14.4399 11.6799'/><path d='M11.88 4V14.17'/><path d='M20 12.1799C20 16.5999 17 20.1799 12 20.1799C7 20.1799 4 16.5999 4 12.1799'/></svg>
  </a>
</div>

Demikikan postingan kali ini tentang cara membuat tombol download bix pada median ui, semoga dapat bermanfaat