<span class="play-button">
<svg class="play-button__oval" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68" viewBox="0 0 68 68">
<defs>
<circle id="prefix__a" cx="32" cy="32" r="32"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(2 2)">
<use fill="#000" fill-opacity=".5" xlink:href="#prefix__a"/>
<circle cx="32" cy="32" r="33" stroke="#000" stroke-opacity=".5" stroke-width="2"/>
<circle cx="32" cy="32" r="31" stroke="#FF552E" stroke-linejoin="miter" stroke-width="2"/>
</g>
</svg>
<svg class="play-button__arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
<path fill="#F5F5F5" fill-rule="evenodd" d="M24 44L24 20 44 32z" transform="translate(-24 -20)"/>
</svg>
</span>
<span class="play-button">
<svg class="play-button__oval" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
width="68" height="68" viewBox="0 0 68 68">
<defs>
<circle id="prefix__a" cx="32" cy="32" r="32"/>
</defs>
<g fill="none" fill-rule="evenodd" transform="translate(2 2)">
<use fill="#000" fill-opacity=".5" xlink:href="#prefix__a"/>
<circle cx="32" cy="32" r="33" stroke="#000" stroke-opacity=".5" stroke-width="2"/>
<circle cx="32" cy="32" r="31" stroke="#FF552E" stroke-linejoin="miter" stroke-width="2"/>
</g>
</svg>
<svg class="play-button__arrow" xmlns="http://www.w3.org/2000/svg" width="20" height="24" viewBox="0 0 20 24">
<path fill="#F5F5F5" fill-rule="evenodd" d="M24 44L24 20 44 32z" transform="translate(-24 -20)"/>
</svg>
</span>
{
"siteUnit": "music",
"departmentName": "Music",
"background": "light"
}
.play-button
display block
position relative
height 68px
width 68px
&__arrow
position absolute
top 50%
left 50%
transform translate3d(-50%, -50%, 0)
There are no notes for this item.