CSS style for 1.25" button template sheet

buttons.ipynb

item_template_exp.html

<span class="dot" style="background-color: {{color}}"><div class="center">
{% if image == '5 (1).png' %}
	<img class='graphic' src='5 (1).png'>
{% elif image == '3.png' %}
	<img class='graphic' src='3.png'>
{% elif image == '2 (1).png' %}
	<img class='graphic' src='2 (1).png'>
{% elif image == '4.png' %}
	<img class='graphic' src='4.png'>
{% elif image == '1 (1).png' %}
	<img class='graphic' src='1 (1).png'>
{% elif image == '2.png' %}
	<img class='graphic' src='2.png'>
{% elif image == '1.png' %}
	<img class='graphic' src='1.png'>
{% elif image == '5.png' %}
	<img class='graphic' src='5.png'>
{% elif image == '4 (1).png' %}
	<img class='graphic' src='4 (1).png'>
{% elif image == '3 (1).png' %}
	<img class='graphic' src='3 (1).png'>
{% endif %}
</div></span>

style.css

@page {
    width: 7.5in;
    height: 10in;
    margin: 0in;
    padding: 0.5in;
}

.item {
  height: 1.6in;
  text-align: center;
  margin: 0.05in;
}

.dot {
  height: 1.6in;
  width: 1.6in;
  background-color: #fff;
  display: inline-block;
  border-radius: 50%;
  border-style: solid;
  border-color: #000;
}

.graphic {
  width: 1.156in;
  height: 1.156in;
  margin: auto;
  display: block;
  border-radius: 50%;
}

.center {
  height: 1.6in;
  width: 1.6in;
  position: relative;
}

.center img {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}