CodePen Embed - pjvYGO

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <title>Animated Radial Button</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
  <div class="container-fluid background">
    <div class="row">
      <div class="col-md-12">
        <div class="button-wrap">
          <a href="#contact">
            <div class="outer"></div>
          </a>
          <nav class="ss-icon" tabindex="0">
            <span id="center-bar"></span>
            <a href="https://www.facebook.com/?_rdr=p" target="_blank"><span>Facebook</span></a>
            <a href="https://www.pinterest.com/" target="_blank"><span>Pinterest</span></a>
            <a href="https://www.google.com/" target="_blank"><span>Google+</span></a>
            <a href="https://ello.co/" target="_blank"><span>Ello</span></a>
            <a href="https://twitter.com/" target="_blank"><span>Twitter</span></a>
          </nav>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

@keyframes outer {
  0% {
    trasform: scale(1.2);
  }
  50% {
    transform: scale(1.8);
    opacity: 0.2;
  }
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

@keyframes getcrossedpos {
  45% {
    transform: rotate(0);
    top: 33%;
  }
  50% {
    transform: rotate(0);
    top: 45%;
  }
  100% {
    transform: rotate(45deg);
    top: 45%;
  }
}

@keyframes straightenpos {
  0% {
    transform: rotate(45deg);
    top: 45%;
  }
  55% {
    transform: rotate(0);
    top: 33%;
  }
  100% {
    -webkit-transform: rotate(0);
    transform: rotate(0);
    top: 33%;
  }
}

@keyframes getcrossedneg {
  45% {
    transform: rotate(0);
    top: 60%;
  }
  50% {
    transform: rotate(0);
    top: 45%;
  }
  100% {
    transform: rotate(-45deg);
    top: 45%;
  }
}
/************end keyframes*************/
@font-face {
  font-family: "SSSocialCircle";
  src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/ss-social-circle.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

.background {
  padding: 25px 0 450px 0;
  background: rgba(0, 0, 0, 1);
}

h1 {
  text-align: center;
  color: rgba(155,155,155,1);
  font-family: Helvetica;
  font-size: 2em;
}

.ss-icon {
  font-family: "SSSocialCircle";
  text-decoration: none;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga";
  font-smoothing: antialiased;
}

nav {
  position: absolute;
  left: 27%;
  top: 27%;
  width: 7rem;
  height: 7rem;
  z-index: initial;
  line-height: 15rem;
  border-radius: 50%;
  transition: .3s;
  outline: none;
}

nav:before,
nav:after,
nav > span {
  position: absolute;
  left: 27%;
  content: "";
  display: block;
  width: 46%;
  top: 33%;
  height: 8%;
  background: #fff;
  transform-origin: center;
  transition: .5s;
}

nav span {
  top: 46%;
}

nav:after {
  top: 60%;
}

nav.clicked:before {
  animation: getcrossedpos .6s forwards;
}

nav.clicked:after {
  animation: getcrossedneg .6s forwards;
}

nav.clicked span#center-bar {
  opacity: 0;
}

nav:hover {
  cursor: pointer;
}

nav.clicked {
  outline: none;
  z-index: 1;
}

nav a {
  display: flex;
  background: black;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  text-align: center;
  line-height: 1.5;
  color: #fff;
  text-decoration: none;
  position: absolute;
  font-size: 4rem;
  text-align: center;
  left: 1rem;
  top: 1rem;
  transition: .4s;
  z-index: -19;
}

nav a span {
  width: 5rem;
  height: 5rem;
}

nav a:hover,
nav a:focus {
  background-color: #000;
}

nav a:nth-child(1) {
  transform: rotate(-72deg);
}

nav a:nth-child(1) span {
  transform: rotate(--72deg);
}

nav.clicked a:nth-child(1) {
  transform: rotate(-72deg) translateX(15rem);
}

nav a:nth-child(2) {
  transform: rotate(0deg);
}

nav a:nth-child(2) span {
  transform: rotate(-0deg);
}

nav.clicked a:nth-child(2) {
  transform: rotate(0deg) translateX(15rem);
}

nav a:nth-child(3) {
  transform: rotate(72deg);
}

nav a:nth-child(3) span {
  transform: rotate(-72deg);
}

nav.clicked a:nth-child(3) {
  transform: rotate(72deg) translateX(15rem);
}

nav a:nth-child(4) {
  transform: rotate(144deg);
}

nav a:nth-child(4) span {
  transform: rotate(-144deg);
}

nav.clicked a:nth-child(4) {
  transform: rotate(144deg) translateX(15rem);
}

nav a:nth-child(5) {
  transform: rotate(216deg);
}

nav a:nth-child(5) span {
  transform: rotate(-216deg);
}

nav.clicked a:nth-child(5) {
  transform: rotate(216deg) translateX(15rem);
}

nav a:nth-child(6) {
  transform: rotate(288deg);
}

nav a:nth-child(6) span {
  transform: rotate(-288deg);
}

nav.clicked a:nth-child(6) {
  transform: rotate(288deg) translateX(15rem);
}

.button-wrap {
  width: 150px;
  height: 150px;
  background-color: rgba(0, 0, 0, 0.5);
  display: block;
  border-radius: 100%;
  box-shadow: 0 0 15px 2px #bdc3c7;
  cursor: pointer;
  transition: .3s all ease-in;
  position: relative;
  margin: 20% auto;
}

.button-wrap a {
  text-decoration: none;
}

.button-wrap:hover {
  background: rgba(100, 0, 0, 0.4);
}

.button-wrap:active {
  background-color: #e74c3c;
  color: #ecf0f1;
}

.fa-icon {
  color: white;
  font-size: 1em;
  line-height: 150px;
  display: block;
  text-align: center;
  transition: .1s all ease-in;
}

.outer {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  position: absolute;
  background-color: transparent;
  border: 1px solid #7f8c8d;
  transition: 1s all ease;
  animation: outer 2.5s infinite;
}

    function clickSet() {
      circularnav.classList.toggle("closed")
      circularnav.classList.toggle("clicked");
      if (circularnav.classList.contains("closed")) {
        // closed button
        var pseudoBefore = window.getComputedStyle(
          document.querySelector('.ss-icon'), ':before'
        ).animation
      }
    }

    var circularnav = document.getElementsByClassName("ss-icon")[0];
    circularnav.addEventListener("click", clickSet, false);

    circularnav.addEventListener("keydown", function(e) {
      if (e.keyCode === 13) {
        clickSet();
      }
    });

Run Pen

This Pen is owned by Craig Wheeler on CodePen.

See more by @craigwheeler on CodePen

External CSS

//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.