Button by Pradeepsaranbishnoi

Made by

@Pradeepsaranbishnoi

Theme:

Light

#button

#e8e8e8

344 views

CSSAdd prefixes

1.glowMe,
2.glowAll {
3  opacity: 0;
4  transition: opacity 300ms linear 0s;
5}
6
7.button-container svg {
8  width: 100px;
9  height: 100px;
10  cursor: pointer;
11}
12
13.button-container svg:hover .glowMe {
14  opacity: 0.5;
15}
16
17.button-container svg:hover .glowAll {
18  opacity: 1;
19}
20
21.button-container .buttonTop {
22  fill: #5f309b;
23  transition: fill 300ms linear 0s;
24}
25
26.button-container svg:hover .buttonTop {
27  fill: #a661ff;
28}
29
30.button-container .buttonSides {
31  fill: #371b5b;
32  transition: fill 300ms linear 0s;
33}
34
35.button-container svg:hover .buttonSides {
36  fill: #763ac2;
37}
38
39.button-container svg:focus {
40  outline: none;
41}
42
43.button-container svg:focus .buttonTop,
44.button-container svg:focus .playSides {
45  stroke: white;
46  stroke-width: 2px;
47}
48
49.button-container svg:focus .playSides {
50  stroke-width: 1px;
51}
52
53.button-container svg:active .buttonTop {
54  fill: #c79cff;
55}
56
57.button-container svg:nth-of-type(1) {
58  transform: translate(37%, -35%);
59}
60
61.button-container svg:nth-of-type(3) {
62  transform: translate(-37%, 35%);
63}
64

.glowMe,
.glowAll {
  opacity: 0;
  transition: opacity 300ms linear 0s;
}

.button-container svg {
  width: 100px;
  height: 100px;
  cursor: pointer;
}

.button-container svg:hover .glowMe {
  opacity: 0.5;
}

.button-container svg:hover .glowAll {
  opacity: 1;
}

.button-container .buttonTop {
  fill: #5f309b;
  transition: fill 300ms linear 0s;
}

.button-container svg:hover .buttonTop {
  fill: #a661ff;
}

.button-container .buttonSides {
  fill: #371b5b;
  transition: fill 300ms linear 0s;
}

.button-container svg:hover .buttonSides {
  fill: #763ac2;
}

.button-container svg:focus {
  outline: none;
}

.button-container svg:focus .buttonTop,
.button-container svg:focus .playSides {
  stroke: white;
  stroke-width: 2px;
}

.button-container svg:focus .playSides {
  stroke-width: 1px;
}

.button-container svg:active .buttonTop {
  fill: #c79cff;
}

.button-container svg:nth-of-type(1) {
  transform: translate(37%, -35%);
}

.button-container svg:nth-of-type(3) {
  transform: translate(-37%, 35%);
}

HTML

1<div class="button-container">
2  <svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
3  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
4  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
5  <g clip-path="url(#clip0_106_11)">
6    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
7    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
8    <g filter="url(#filter0_d_106_11)" class="glowAll">
9      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
10    </g>
11    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
12      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
13    </g>
14  </g>
15  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
16  <defs>
17    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
18      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
19      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
20      <feOffset></feOffset>
21      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
22      <feComposite operator="out" in2="hardAlpha"></feComposite>
23      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
24      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
25      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
26    </filter>
27    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
28      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
29      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
30      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
31    </filter>
32    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
33      <stop stop-color="white"></stop>
34      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
35    </linearGradient>
36    <clipPath id="clip0_106_11">
37      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
38    </clipPath>
39  </defs>
40</svg>
41
42<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
43  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
44  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
45  <g clip-path="url(#clip0_106_11)">
46    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
47    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
48    <g filter="url(#filter0_d_106_11)" class="glowAll">
49      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
50    </g>
51    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
52      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
53    </g>
54  </g>
55  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
56  <defs>
57    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
58      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
59      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
60      <feOffset></feOffset>
61      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
62      <feComposite operator="out" in2="hardAlpha"></feComposite>
63      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
64      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
65      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
66    </filter>
67    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
68      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
69      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
70      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
71    </filter>
72    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
73      <stop stop-color="white"></stop>
74      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
75    </linearGradient>
76    <clipPath id="clip0_106_11">
77      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
78    </clipPath>
79  </defs>
80</svg>
81
82<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
83  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
84  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
85  <g clip-path="url(#clip0_106_11)">
86    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
87    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
88    <g filter="url(#filter0_d_106_11)" class="glowAll">
89      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
90    </g>
91    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
92      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
93    </g>
94  </g>
95  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
96  <defs>
97    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
98      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
99      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
100      <feOffset></feOffset>
101      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
102      <feComposite operator="out" in2="hardAlpha"></feComposite>
103      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
104      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
105      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
106    </filter>
107    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
108      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
109      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
110      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
111    </filter>
112    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
113      <stop stop-color="white"></stop>
114      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
115    </linearGradient>
116    <clipPath id="clip0_106_11">
117      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
118    </clipPath>
119  </defs>
120</svg>
121</div>
122

<div class="button-container">
  <svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
  <g clip-path="url(#clip0_106_11)">
    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
    <g filter="url(#filter0_d_106_11)" class="glowAll">
      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
    </g>
    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
    </g>
  </g>
  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
  <defs>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
      <feComposite operator="out" in2="hardAlpha"></feComposite>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
    </filter>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
    </filter>
    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
      <stop stop-color="white"></stop>
      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
    </linearGradient>
    <clipPath id="clip0_106_11">
      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
    </clipPath>
  </defs>
</svg>

<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
  <g clip-path="url(#clip0_106_11)">
    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
    <g filter="url(#filter0_d_106_11)" class="glowAll">
      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
    </g>
    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
    </g>
  </g>
  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
  <defs>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
      <feComposite operator="out" in2="hardAlpha"></feComposite>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
    </filter>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
    </filter>
    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
      <stop stop-color="white"></stop>
      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
    </linearGradient>
    <clipPath id="clip0_106_11">
      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
    </clipPath>
  </defs>
</svg>

<svg tabindex="0" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 100 100" height="25%" width="25%">
  <rect fill="#763AC2" height="8" width="90.62" y="51" x="5.04999" class="buttonSides"></rect>
  <rect fill="#763AC2" transform="matrix(0.866025 -0.5 0.866025 0.5 1 59)" rx="8" height="57" width="57" class="buttonSides"></rect>
  <g clip-path="url(#clip0_106_11)">
    <rect fill="#A661FF" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57" class="buttonTop"></rect>
    <path fill="#763AC2" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z" class="buttonSides playSides"></path>
    <g filter="url(#filter0_d_106_11)" class="glowAll">
      <path fill="white" d="M64.2199 42.5L55.4353 61.4282L31.4353 47.5718L64.2199 42.5Z"></path>
    </g>
    <g filter="url(#filter1_f_106_11)" opacity="0.5" class="glowMe">
      <path fill="white" d="M73.0478 36.9032L58.6665 67.8905L19.3761 45.2062L73.0478 36.9032Z"></path>
    </g>
  </g>
  <path fill="url(#paint0_linear_106_11)" d="M64 43L32 47.8L32 8L64 8L64 43Z" opacity="0.5" class="glowMe"></path>
  <defs>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="34.9282" width="48.7846" y="34.5" x="23.4353" id="filter0_d_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feColorMatrix result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" type="matrix" in="SourceAlpha"></feColorMatrix>
      <feOffset></feOffset>
      <feGaussianBlur stdDeviation="4"></feGaussianBlur>
      <feComposite operator="out" in2="hardAlpha"></feComposite>
      <feColorMatrix values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0" type="matrix"></feColorMatrix>
      <feBlend result="effect1_dropShadow_106_11" in2="BackgroundImageFix" mode="normal"></feBlend>
      <feBlend result="shape" in2="effect1_dropShadow_106_11" in="SourceGraphic" mode="normal"></feBlend>
    </filter>
    <filter color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse" height="62.9873" width="85.6716" y="20.9032" x="3.37613" id="filter1_f_106_11">
      <feFlood result="BackgroundImageFix" flood-opacity="0"></feFlood>
      <feBlend result="shape" in2="BackgroundImageFix" in="SourceGraphic" mode="normal"></feBlend>
      <feGaussianBlur result="effect1_foregroundBlur_106_11" stdDeviation="8"></feGaussianBlur>
    </filter>
    <linearGradient gradientUnits="userSpaceOnUse" y2="8" x2="47" y1="48" x1="47" id="paint0_linear_106_11">
      <stop stop-color="white"></stop>
      <stop stop-opacity="0" stop-color="white" offset="1"></stop>
    </linearGradient>
    <clipPath id="clip0_106_11">
      <rect fill="white" transform="matrix(0.866025 -0.5 0.866025 0.5 1 51)" rx="8" height="57" width="57"></rect>
    </clipPath>
  </defs>
</svg>
</div>