CSS

【CSS】SVGとCSSを使用した色付きボタンConfetti Button

February 23, 2018
Confetti Button

Confetti ButtonはSVGとCSSを使用した色付きボタン。

HTML

<div class="button--action">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 173.71 291.38"><defs><style>.cls-1{fill:#565050;}.cls-2{fill:#1a191a;}</style></defs><title>button--confetti</title><g id="reaction"><polygon class="cls-1" points="123.86 203.05 128.46 206.58 133.98 204.8 132.04 210.26 135.44 214.96 129.65 214.81 126.23 219.5 124.58 213.93 119.07 212.13 123.85 208.85 123.86 203.05"/><polygon class="cls-1" points="111.39 180.42 113.92 185.55 119.59 186.38 115.49 190.37 116.46 196.01 111.39 193.35 106.32 196.01 107.29 190.37 103.19 186.38 108.86 185.55 111.39 180.42"/><polygon class="cls-1" points="81.77 261.5 84.66 267.35 91.12 268.29 86.44 272.85 87.55 279.29 81.77 276.25 75.99 279.29 77.09 272.85 72.41 268.29 78.88 267.35 81.77 261.5"/><polygon class="cls-1" points="91.9 247.06 93.34 249.99 96.58 250.46 94.24 252.74 94.79 255.96 91.9 254.44 89.01 255.96 89.56 252.74 87.22 250.46 90.45 249.99 91.9 247.06"/><polygon class="cls-1" points="63.36 170.64 64.8 173.56 68.03 174.03 65.69 176.31 66.25 179.53 63.36 178.01 60.47 179.53 61.02 176.31 58.68 174.03 61.91 173.56 63.36 170.64"/><polygon class="cls-1" points="96.87 211.48 98.31 214.41 101.54 214.88 99.2 217.16 99.76 220.38 96.87 218.86 93.98 220.38 94.53 217.16 92.19 214.88 95.42 214.41 96.87 211.48"/><polygon class="cls-1" points="103.89 232.3 105.34 235.23 108.57 235.7 106.23 237.98 106.78 241.2 103.89 239.68 101 241.2 101.55 237.98 99.21 235.7 102.44 235.23 103.89 232.3"/><polygon class="cls-1" points="124.02 227.97 126.59 233.17 132.33 234.01 128.18 238.06 129.16 243.77 124.02 241.07 118.89 243.77 119.87 238.06 115.72 234.01 121.46 233.17 124.02 227.97"/><polygon class="cls-1" points="46.45 226.56 49.02 231.76 54.76 232.6 50.61 236.65 51.59 242.36 46.45 239.66 41.32 242.36 42.3 236.65 38.15 232.6 43.89 231.76 46.45 226.56"/><path class="cls-1" d="M72.42,168.34l-5.07,15.35H64.51l-4-11.47L56.4,183.69H53.56l-5.07-15.35h3.13l3.55,11.6,4-11.63H61.7l4,11.63,3.55-11.6Z"/><path class="cls-1" d="M81.51,184.05a8,8,0,1,1,8.11-8A7.78,7.78,0,0,1,81.51,184.05Zm0-13.48c-3.1,0-5,2.4-5,5.4s1.9,5.43,5,5.43,5-2.39,5-5.43S84.58,170.57,81.51,170.57Z"/><path class="cls-1" d="M114.51,168.34l-5.08,15.35h-2.84l-4-11.47-4.07,11.47H95.64l-5.07-15.35H93.7l3.56,11.6,4-11.63h2.49l4,11.63,3.55-11.6Z"/><path class="cls-1" d="M119.72,184a2,2,0,1,1,2.13-2A2,2,0,0,1,119.72,184Zm1.62-22.61-.29,16.35h-2.69l-.25-16.35Z"/><path class="cls-1" d="M60.17,210.5c-2.22-3.81-8.46-2.7-8.46,2.07,0,3.29,3.93,6.65,8.46,11.15,4.53-4.5,8.46-7.86,8.46-11.15C68.63,207.78,62.37,206.72,60.17,210.5Z"/><path class="cls-1" d="M116.39,259a2.16,2.16,0,0,0-4,1c0,1.57,1.88,3.18,4,5.33,2.17-2.15,4-3.76,4-5.33A2.16,2.16,0,0,0,116.39,259Z"/><path class="cls-1" d="M46.58,195.55a2.16,2.16,0,0,0-4,1c0,1.57,1.88,3.17,4,5.32,2.17-2.15,4-3.75,4-5.32A2.16,2.16,0,0,0,46.58,195.55Z"/><path class="cls-1" d="M50.81,253.37a2.16,2.16,0,0,0-4,1c0,1.57,1.88,3.18,4,5.32,2.17-2.14,4-3.75,4-5.32A2.16,2.16,0,0,0,50.81,253.37Z"/><path class="cls-1" d="M91,235a2.16,2.16,0,0,0-4,1c0,1.57,1.87,3.17,4,5.32,2.16-2.15,4-3.75,4-5.32A2.16,2.16,0,0,0,91,235Z"/><circle class="cls-1" cx="71.35" cy="199.39" r="1.41"/><circle class="cls-1" cx="39.26" cy="219.49" r="1.06"/><circle class="cls-1" cx="105.55" cy="250.51" r="1.06"/><circle class="cls-1" cx="130.23" cy="251.92" r="1.76"/><circle class="cls-1" cx="127.76" cy="181.76" r="0.71"/><circle class="cls-1" cx="41.38" cy="267.44" r="1.06"/><circle class="cls-1" cx="72.41" cy="258.98" r="1.06"/><circle class="cls-1" cx="70.64" cy="196.57" r="0.71"/><circle class="cls-1" cx="105.9" cy="202.21" r="0.71"/><polygon class="cls-1" points="68.71 233.24 63.41 233.24 60.77 237.82 63.41 242.41 68.71 242.41 71.35 237.82 68.71 233.24"/><circle class="cls-1" cx="79.55" cy="211.51" r="1.06"/><circle class="cls-1" cx="89.55" cy="201.51" r="1.06"/></g><g id="trigger"><path class="cls-2" d="M87.35,187.83c-12.2-20.93-46.5-14.82-46.5,11.41,0,18.06,21.59,36.53,46.5,61.26,24.92-24.73,46.5-43.2,46.5-61.26C133.85,172.92,99.46,167.05,87.35,187.83Z"/></g></svg>
</div>