<div class="button-group">
<div>
<svg viewBox="0 0 512 512"><path d="M427 201.9c-0.6-4.2-2.9-8-6.4-10.3L264.2 87.3c-4.9-3.3-11.4-3.3-16.3 0L91.4 191.6c-4 2.7-6.5 7.4-6.5 12.2v104.3c0 4.8 2.5 9.6 6.5 12.2l156.4 104.3c4.9 3.3 11.4 3.3 16.3 0L420.6 320.4c4-2.6 6.6-7.4 6.6-12.2V203.9C427.1 203.2 427.1 202.6 427 201.9 427 201.7 427.1 202.6 427 201.9zM270.7 127.1l115.2 76.8 -51.5 34.4 -63.8-42.7V127.1zM241.3 127.1v68.6l-63.8 42.7 -51.5-34.4L241.3 127.1zM114.3 231.4l36.8 24.6 -36.8 24.6V231.4zM241.3 384.9L126.1 308.1l51.5-34.4 63.8 42.6V384.9zM256 290.8l-52-34.8 52-34.8 52 34.8L256 290.8zM270.7 384.9V316.3l63.8-42.6 51.5 34.4L270.7 384.9zM397.7 280.6l-36.8-24.6 36.8-24.6V280.6z"/></svg><!--[if lt IE 9]><em>CodePen</em><![endif]-->
</div>
<div>
<svg viewBox="0 0 512 512"><path d="M256 70.7c-102.6 0-185.9 83.2-185.9 185.9 0 82.1 53.3 151.8 127.1 176.4 9.3 1.7 12.3-4 12.3-8.9V389.4c-51.7 11.3-62.5-21.9-62.5-21.9 -8.4-21.5-20.6-27.2-20.6-27.2 -16.9-11.5 1.3-11.3 1.3-11.3 18.7 1.3 28.5 19.2 28.5 19.2 16.6 28.4 43.5 20.2 54.1 15.4 1.7-12 6.5-20.2 11.8-24.9 -41.3-4.7-84.7-20.6-84.7-91.9 0-20.3 7.3-36.9 19.2-49.9 -1.9-4.7-8.3-23.6 1.8-49.2 0 0 15.6-5 51.1 19.1 14.8-4.1 30.7-6.2 46.5-6.3 15.8 0.1 31.7 2.1 46.6 6.3 35.5-24 51.1-19.1 51.1-19.1 10.1 25.6 3.8 44.5 1.8 49.2 11.9 13 19.1 29.6 19.1 49.9 0 71.4-43.5 87.1-84.9 91.7 6.7 5.8 12.8 17.1 12.8 34.4 0 24.9 0 44.9 0 51 0 4.9 3 10.7 12.4 8.9 73.8-24.6 127-94.3 127-176.4C441.9 153.9 358.6 70.7 256 70.7z"/></svg><!--[if lt IE 9]><em>GitHub</em><![endif]-->
</div>
<div class="active">
<svg viewBox="0 0 512 512"><path d="M256 68.4C152.4 68.4 68.4 152.4 68.4 256c0 103.6 84 187.6 187.6 187.6S443.6 359.6 443.6 256C443.6 152.4 359.6 68.4 256 68.4zM410.6 247.3c-40.3-6.6-77.3-7-111-1.1 -3.8-8.8-7.8-17.6-12-26.3 36.1-15.6 65.1-36.9 86.7-63.8C395.4 181 408.6 212.6 410.6 247.3zM350.5 133.4c-18.8 24.3-44.8 43.5-78 57.5 -15.9-29.1-34-57.5-54.5-85 12.2-3.1 24.9-4.9 38-4.9C291.6 101 324.3 113.2 350.5 133.4zM186.1 117.9c20.8 27.2 39.3 55.3 55.3 84.1 -38 11.2-83.4 16.9-135.8 17.3C116.4 175 146.3 138.1 186.1 117.9zM101 256c0-1.3 0.2-2.7 0.2-4 60.2-0.1 112.1-7 155.6-20.7 3.6 7.4 7.1 14.9 10.5 22.4 -52.8 16.5-96.4 50.4-130.3 101.3C114.5 328.2 101 293.6 101 256zM160.9 378.1c30.8-48.3 70.1-79.7 118.8-94.2 14.5 37.8 25.2 76.8 31.9 116.6 -17.3 6.7-36 10.5-55.6 10.5C220.1 411 187.2 398.6 160.9 378.1zM342 384.8c-6.9-36.8-16.9-72.8-30-107.8 29.3-4.1 61.6-3.1 96.9 3.1C402.1 323.6 377.2 361.3 342 384.8z"/></svg><!--[if lt IE 9]><em>Dribbble</em><![endif]-->
</div>
<div>
<svg viewBox="0 0 512 512"><path d="M254.8 171.8c6.4 8.9 9.6 19.6 9.6 32 0 12.8-3.2 23.1-9.7 30.9 -3.6 4.4-9 8.4-16 12 10.7 3.9 18.8 10.1 24.2 18.5 5.5 8.4 8.2 18.7 8.2 30.7 0 12.4-3.1 23.6-9.3 33.5 -4 6.6-8.9 12.1-14.9 16.5 -6.7 5.1-14.6 8.6-23.7 10.5 -9.1 1.9-19 2.8-29.6 2.8H99.1V149.5h101.4C226.1 149.8 244.2 157.3 254.8 171.8zM140.9 185.9v46.3h51c9.1 0 16.5-1.7 22.2-5.2 5.7-3.5 8.5-9.6 8.5-18.4 0-9.8-3.8-16.2-11.3-19.4 -6.5-2.2-14.7-3.3-24.8-3.3H140.9zM140.9 266.9v55.9h50.9c9.1 0 16.2-1.2 21.2-3.7 9.2-4.6 13.8-13.3 13.8-26.2 0-10.9-4.5-18.4-13.4-22.5 -5-2.3-12-3.5-21-3.6H140.9L140.9 266.9zM396.4 207.3c10.8 4.8 19.8 12.5 26.8 23 6.4 9.2 10.5 19.9 12.4 32.1 1.1 7.1 1.5 17.4 1.3 30.8H323.9c0.6 15.6 6 26.5 16.2 32.7 6.2 3.9 13.6 5.8 22.4 5.8 9.2 0 16.8-2.4 22.5-7.1 3.2-2.6 5.9-6.1 8.4-10.7h41.4c-1.1 9.2-6.1 18.5-15 28 -13.9 15.1-33.4 22.6-58.4 22.6 -20.6 0-38.9-6.4-54.6-19.1 -15.8-12.7-23.7-33.4-23.7-62.1 0-26.9 7.1-47.5 21.4-61.8 14.2-14.3 32.7-21.5 55.5-21.5C373.4 200 385.6 202.4 396.4 207.3zM335.7 242.3c-5.7 5.9-9.3 13.9-10.8 24h69.9c-0.7-10.8-4.3-18.9-10.8-24.5 -6.5-5.6-14.5-8.4-24.1-8.4C349.5 233.4 341.4 236.4 335.7 242.3zM402.8 161.5h-91.2V182.7h91.2V161.5z"/></svg><!--[if lt IE 9]><em>Behance</em><![endif]-->
</div>
</div>
<svg class="svg-filters">
<defs>
<radialGradient id="active" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:#ebf7ff;stop-opacity:1" />
<stop offset="100%" style="stop-color:#b3e1ff;stop-opacity:1" />
</radialGradient>
<filter id="inset-shadow">
<feOffset
dx='-1'
dy='1'
/>
<feGaussianBlur
stdDeviation='.7'
result='offset-blur'
/>
<feComposite
operator='out'
in='SourceGraphic'
in2='offset-blur'
result='inverse'
/>
<feFlood
flood-color='black'
flood-opacity='0.05'
result='color'
/>
<feComposite
operator='in'
in='color'
in2='inverse'
result='shadow'
/>
<feComposite
operator='over'
in='shadow'
in2='SourceGraphic'
/>
</filter>
</defs>
</svg>
body
padding 0
margin 0
display flex
background #303030
align-items center
justify-content center
min-height 100vh
&:after
content ""
opacity .7
width 100%
min-height 100vh
background: #303033 url(http://subtlepatterns.com/patterns/broken_noise.png);
position absolute
z-index 1
.button-group
position relative
z-index 2
display flex
min-width 600px
height 100px
background-color #000
border-radius 7px
padding 4px
& > div
cursor pointer
flex 1
background-image: linear-gradient(to top, #242424 0%, #303030 100%);
display flex
align-items center
justify-content center
margin 1px
transition .2s
font-size 2.5em
box-shadow inset 0 20px 4px -21px rgba(#fff,.4), 0 19px 13px 0 rgba(0,0,0,.3)
color #181818
position relative
z-index 2
&:before
content ""
display block
width .8em
height .8em
transition .1s
background-image: radial-gradient(circle 30px at center, #ebf7ff 0%, #b3e1ff 47%, #b3e1ff 100%);
position absolute
filter blur(15px)
top 50%
left 50%
border-radius 50%
transform translate(-50%, -50%)
opacity 0
&:after
content ""
display block
height 70px
width 1px
position absolute
border-radius 50%
z-index -1
opacity 0
transition .2s
filter blur(0px)
box-shadow:
-75px 0 0px 0px rgba(#b3e1ff, 0.3),
74px 0 0px 0px rgba(#b3e1ff, 0.35)
svg
height 2em
width 2em
position relative
display block
fill #181818
filter: drop-shadow(0 1px 1px rgba(#fff, 0.15)) url(#inset-shadow)
&.active
background-image: linear-gradient(to top, #151515 0%, #1d1d1d 100%);
box-shadow inset 0 16px 14px -21px transparent, 0 0px 13px 0 rgba(0,0,0,0.3),inset 0 0 7px 2px rgba(0,0,0,0.4)
z-index 0
&:before
width 1em
height 1em
opacity .8
&:after
opacity 0
svg
fill url(#active)
filter: drop-shadow(0 1px 1px rgba(#fff, 0))
div:first-of-type
border-radius 4px 0 0 4px
&:after
box-shadow -85px 0 18px 1px transparent, 83px 0 12px 1px #b3e1ff
div:last-of-type
border-radius 0 4px 4px 0
&:after
box-shadow -85px 0 18px 1px #b3e1ff, 83px 0 12px 1px transparent
.svg-filters
height 0
width 0
View Compiled
// Based on this dribbble: https://dribbble.com/shots/694671-Buttons-Free-PSD
$( ".button-group > div" ).click(function() {
$('.button-group > div.active').not(this).removeClass('active');
$( this ).toggleClass( "active" );
});
This Pen doesn't use any external CSS resources.