How to Add Buttons and Download Cards in Blogger (With a Countdown Timer)

Buttons tell readers what to do next, and download cards give them everything they need to know about a file before they click. This guide covers every button style in the theme and four kinds of download cards, including one with a countdown timer.

Paste every example on this page in the post editor's HTML view, not in Compose view. To show HTML as code in your own posts, run it through the HTML Escape Tool first.

Buttons

A button is a normal link with the class btn. Put several buttons in a <div class="btns"> to line them up in a row with even spacing.

Styles

<div class="btns">
  <a class="btn" href="your_url">Button</a>
  <a class="btn accent" href="your_url">Accent</a>
  <a class="btn outline" href="your_url">Outline</a>
  <a class="btn soft" href="your_url">Soft</a>
  <a class="btn text" href="your_url">Text only</a>
</div>

The plain btn uses the theme's ink color: dark in light mode and light in dark mode, just like the theme's own buttons.

Icons

Add data-icon with one of these names: download, info, play, external or lock.

<a class="btn accent" data-icon="download" href="your_url">Download</a>

Icon-only buttons

Add icon and leave the text out. Always add aria-label, so screen readers can still say what the button does.

<a class="btn accent icon" data-icon="download" href="your_url" aria-label="Download"></a>

Sizes and corners

<a class="btn accent small" href="your_url">Small</a>
<a class="btn accent large" href="your_url">Large</a>
<a class="btn accent square" href="your_url">Square</a>

Shine

Add shine for a gradient button with a light that sweeps across it. Use it for the one action that matters most in the post.

<a class="btn shine large" data-icon="download" href="your_url">Get it now</a>

Split button with mirror links

The main part of the button opens your main link. The arrow opens a small menu with other links, like mirrors on other hosts.

<div class="split">
  <a class="btn accent" data-icon="download" href="main_url">Download</a>
  <details>
    <summary class="btn accent" aria-label="More download links"></summary>
    <div class="menu">
      <a href="mirror_1">Google Drive</a>
      <a href="mirror_2">Mega</a>
    </div>
  </details>
</div>

Download cards

Every card uses the same inside: a <b> for the file name, a <small> for the details, and a button. Only the class on the outer <div> changes.

1. Pill

A compact card that fits between paragraphs.

<div class="dl pill">
  <div><b>file_name.zip</b><small>ZIP · 1.2 MB</small></div>
  <a class="btn accent icon" data-icon="download" href="your_url" aria-label="Download"></a>
</div>

2. Card with source

Add data-source to show where the file is hosted. You can use a split button here to offer mirrors.

<div class="dl card" data-source="Google Drive">
  <div><b>file_name.zip</b><small>200 MB</small></div>
  <a class="btn accent" data-icon="download" href="your_url">Download</a>
</div>

3. File tile

Set the file type with data-type. It shows as a large badge, and its color follows the type: ZIP and RAR are orange, PDF is red, APK is green, EXE is blue, and MP3 and MP4 are pink. Any other type uses the accent color. Put extra details in <ul class="chips">.

<div class="dl tile" data-type="ZIP">
  <div>
    <b>File title</b><small>file_name.zip</small>
    <ul class="chips"><li>1.2 MB</li><li>v1.0</li></ul>
  </div>
  <div class="btns">
    <a class="btn accent" data-icon="download" href="your_url">Download</a>
    <a class="btn outline" data-icon="play" href="demo_url">Demo</a>
  </div>
</div>

4. Timer

The reader presses Get link, a ring counts down, and then the button turns into the real download link. Set the number of seconds with data-time.

<div class="dl timer" data-time="10">
  <div><b>file_name.zip</b><small>ZIP · 1.2 MB</small></div>
  <a class="btn accent small" data-icon="download" href="your_url">Download</a>
</div>

To change the button text during the countdown, add data-start="Unlock" and data-wait="Almost there…" to the card.

The timer is there to make readers pause, not to protect the file. Anyone can see the real link in the page source, so don't use it to hide private files.

Quick reference

You want	Write
Button	<a class="btn">
Style	add accent, outline, soft or text
Size and corners	add small, large or square
Icon	data-icon="download" (also info, play, external, lock)
Icon only	add icon and aria-label
Row of buttons	<div class="btns">
Pill card	<div class="dl pill">
Card with source	<div class="dl card" data-source="…">
File tile	<div class="dl tile" data-type="ZIP">
Timer card	<div class="dl timer" data-time="10">