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