Pasang Download Button

Terdapat 4 jenis button yang dapat dipasang pada laman statis ataupun postingan blog, diantaranya :

1. Download Card
2. Default Button
3. Outline Button
4. Button With SVG Icon
5. External Link

berikut ini adalah kode button yang dapat dipasang pada laman statis dan postingan blog.

Download Card

Syntax yang digunakan

  
 <div class='dlBox'>
  <!--[ Change data-text='...' atribute to add new file type ]-->
  <span class='fT' data-text='PDF'></span>
  <div class='fN'>
    <!--[ File name ]-->
    <span>Puisi Cermin</span>
    <span class='fS'>1.4mb</span>
  </div>
    
  <!--[ Download link (change href='...' atribute to add link download) ]-->
  <a class='button' aria-label='Download' href='#url_anda'>
    <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>
  

Yang dicetak tebal silahkan ganti dengan kondisi file yang dimiliki.

Default Button

Syntax default button sebagaimana dibawah ini

<a class='button' href='#url_anda'>Default Button</a>

Yang dicetak tebal silahkan ganti dengan kondisi file yang dimiliki.

Outline Button

Syntax yang digunakan :

<a class='button ln' href='#url_anda'>Outline Button</a>

Yang dicetak tebal silahkan ganti dengan kondisi file yang dimiliki.

Button With SVG Icon

Syntax button ini :

<a class='button' href='#url_anda'>
  <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>
  <span>Button With SVG Icon</span>
</a>
<a class='button ln' href='#url_anda'>
  <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>
  <span>Button With SVG Icon</span>
</a>
<a class='button' href='#url_anda'><i class='icon demo'></i>View</a>

Yang dicetak tebal silahkan ganti dengan kondisi file yang dimiliki.

External Link

Untuk membuat external link (tanpa button) bisa menggunakan syntax ini :

<a class='extL' href='#url_anda' rel='noreferrer' target='_blank'>Sample_external_link</a>
<a class='extL alt' href='#url_anda' rel='noreferrer' target='_blank'>Sample_link_alt</a>

Yang dicetak tebal silahkan ganti dengan kondisi file yang dimiliki.

Untuk DEMO bisa KLIK DISINI