LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code
First
Middle
Last
CSS
.btn-group {
  position: relative;
  display: inline-block;
}
.btn-group .btn {
  cursor: pointer;
  float: left;
  height: 40px;
  width: 160px;
  line-height: 40px;
  text-align: center;
  -webkit-user-select: none;
  transition: font-size 0.3s ease;
}
.btn-group .btn:active {
  font-size: 0.8em;
}
.btn-group svg {
  z-index: -1;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.btn-group path {
  fill: none;
  stroke: #19cc95;
  stroke-dasharray: 334.9, 99999;
  transition: stroke-dashoffset 1s cubic-bezier(0, 0.8, 0.2, 1);
  stroke-width: 1;
}
body {
  margin: 0;
  padding: 0;
}
.container {
  font-family: sans-serif;
  font-weight: 300;
  color: #19cc95;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
@media (max-width: 30em) {
  body {
    zoom: 0.75;
  }
}
@media (max-width: 25em) {
  body {
    zoom: 0.5;
  }
}
JS
const pathLength =  68 * 2 + 200;

class BtnGroup {
  constructor(group) {
    this.group = group;
    this.buttons = Array.prototype.slice.call(
      this.group.querySelectorAll('.btn')
    );
    this.svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    this.svg.setAttribute('viewbox',
      `-1 -1 ${160 * this.buttons.length + 2} 42`
    );
    this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    this.currentPath = 'M -80, 40';
    this.currentIndex = -1;
    this.activateIndex(
      this.buttons.indexOf(
        this.group.querySelector('.active')
      )
    );
    this.group.appendChild(this.svg);
    this.svg.appendChild(this.path);
    this.refreshPath();
    for (const button of this.buttons) {
      button.addEventListener('click',
        e => this.onClick(e)
      );
    }
  }
  
  onClick(e) {
    const index = this.buttons.indexOf(e.srcElement || e.target);
    this.activateIndex(index);
  }
  
  refreshPath() {
    this.path.setAttributeNS(null, 'd', this.currentPath);
    this.path.style.strokeDashoffset = (-this.path.getTotalLength() + pathLength) * 0.9965;
  }
  
  center(index) {
    return index * 160 + 80;
  }
  
  removeClass(str) {
    if (this.buttons[this.currentIndex]) {
      this.buttons[this.currentIndex].classList.remove(str);
    }
  }

  addClass(str) {
    if (this.buttons[this.currentIndex]) {
      this.buttons[this.currentIndex].classList.add(str);
    }
  }

  activateIndex(index) {
    const lastCenter = this.center(this.currentIndex);
    const nextCenter = this.center(index);
    const offset = index < this.currentIndex ? -50 : 50;
    const curve = index < this.currentIndex ? -30 : 30;
    this.currentPath += `
      L ${lastCenter + offset        }, 40
      C ${lastCenter + offset + curve}, 40
        ${lastCenter + offset + curve},  0
        ${lastCenter + offset        },  0
      L ${lastCenter - offset        },  0
      C ${lastCenter - offset - curve},  0
        ${lastCenter - offset - curve}, 40
        ${lastCenter - offset        }, 40
      L ${nextCenter + offset        }, 40
      C ${nextCenter + offset + curve}, 40
        ${nextCenter + offset + curve},  0
        ${nextCenter + offset        },  0
      L ${nextCenter - offset        },  0
      C ${nextCenter - offset - curve},  0
        ${nextCenter - offset - curve}, 40
        ${nextCenter - offset        }, 40
      L ${nextCenter                 }, 40
    `;
    this.removeClass('active');
    this.currentIndex = index;
    this.addClass('active');
    this.refreshPath();
  }
};

const groups = Array.prototype.slice.call(document.querySelectorAll('.btn-group'));
for (const group of groups) {
  console.log(new BtnGroup(group));
}
Host Instantly Drag and Drop Website Builder

 

Description

Live Version of this Dribbble shot: https://dribbble.com/shots/2629106-Button-Group
Term
Mon, 11/27/2017 - 22:02

Related Codes

Pen ID
Pen ID
Pen ID