はじめてのtemplateタグ

いままではHTMLでテンプレートを使いたい場合は、scriptタグをつかっていたのですが、templateタグの存在に気がついたのでこれからは積極的につかっていこうと思いました。
ただし、IEとAndroidの対応状況が不安なので、まだ実践では控えておこうと思います。

developer.mozilla.org

DEMO

HTML

<template id="btn">
  <a class="btn" href="" target="_blank" data-color>
    <div class="hole">
      <div class="inner">LINK</div>
    </div>
  </a>
</template>

JavaScript

var list = [
    {
        link : "https://kimizuka.fm",
        color : "red"
    }, {
        link : "https://chibadge.kimizuka.fm",
        color : "blue"
    }, {
        link : "http://404.kimizuka.fm",
        color : "green"
    }
];

for (var i = 0, length = list.length; i < length; ++i) {
    var template = document.getElementById("btn");
    var btn = template.content.querySelector(".btn");
    var clone;
    
    btn.setAttribute("href", list[i].link);
    btn.dataset.color = list[i].color;
    
    clone = document.importNode(template.content, true);
    
    document.body.appendChild(clone);
}

SCSS

@import "compass/reset";

html, body {
  height: 100%;
}

body {
  background: #e3e3e3;
}

.btn {
  $size: 80px;
  
  display: block;
  margin: 10px;
  border-radius: 50%;
  width: $size; height: $size;
  text-decoration: none;
  cursor: pointer;
  user-select: none;

  .hole {
    position: relative;
    border-radius: 50%;
    width: $size; height: $size;
    box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
  }
  
  .inner {
    position: relative;
    border-radius: 50%;
    width: $size; height: $size;
    color: rgba(255, 255, 255, .9);
    font: 20px AvenirNext-Heavy;
    line-height: $size;
    text-align: center;
    cursor: pointer;
    transition: opacity .6s ease;
    pointer-events: none;
    overflow: hidden;
    
    &:after {
      display: block;
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      content: "";
      background: linear-gradient(rgba(255, 255, 255, .1), rgba(255, 255, 255, 0));
    }
  }
  
  &:hover {
    .hole {
      box-shadow: none;
    }
    
    .inner {
      top: 4px;
      box-shadow: none !important;
      
      &:after {
        background: rgba(255, 255, 255, 0);
      }
    }
  }
  
  &.push {
    .hole {
      top: 4px;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25) inset;
      overflow: hidden;
    }
    
    .inner {
      &:after {
        background: linear-gradient(rgba(0, 0, 0, .1), rgba(0, 0, 0, 0));
      }
    }
  }
  
  &[data-color="black"] .inner {
    background: #424242;
    box-shadow: 0 2px 0 #212121;
  }
  
  &[data-color="red"] .inner {
    background: #F50057;
    box-shadow: 0 2px 0 #880E4F;
  }
  
  &[data-color="purple"] .inner {
    background: #D500F9;
    box-shadow: 0 2px 0 #4A148C;
  }

  &[data-color="blue"] .inner {
    background: #00B0FF;
    box-shadow: 0 2px 0 #01579B;
  }

  &[data-color="green"] .inner {
    background: #00E676;
    box-shadow: 0 2px 0 #1B5E20;
  }
  
  &[data-color="yellow"] .inner {
    background: #FFC400;
    box-shadow: 0 2px 0 #FF6F00;
  }
}