group button with svg icons

group-button-with-svg-icons.markdown

group button with svg icons

Group button with svg icons, based on dribble project: https://dribbble.com/shots/694671-Buttons-Free-PSD

A Pen by Grzegorz Witczak on CodePen.

License.

index.html

<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>

script.js

// 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" );
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.stylus

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