Beranda
Post

Cara Membuat Tombol (Button) pada Template Median UI

How to add Button at Median UI Blogger Template

Ada beberapa tipe button / tombol yang bisa digunakan

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

1. Button Standar

Button

Format penulisan:

<a class='button' href='your_url'>Button</a>

2. Outline Style

Button

Format penulisan:

<a class='button ln' href='your_url'>Button</a>

3. Tanpa Background

Button

Format penulisan:

<a class='button sc' href='your_url'>Button</a>

4. Dengan Icon svg

Button

Format penulisan:

<a class='button' 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>
  <span>Button</span>
</a>
Button

Format penulisan:

<a class='button ln' 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>
  <span>Button</span>
</a>
Button

Format penulisan:

<a class='button sc' 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>
  <span>Button</span>
</a>

5. Membuat 2 Button Berjejer

Info Download

Format penulisan:

<div class='btnF'>
  <a class='button ln' href='your_url'>
    <svg class="line" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><line x1="12" x2="12" y1="16" y2="12"></line><line x1="12" x2="12.01" y1="8" y2="8"></line></svg>
    <span>Info</span>
  </a>
  <a class='button' 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>
    <span>Download</span>
  </a>
</div>