Hinged Twitter Button

In this example below you will see how to do a Hinged Twitter Button with some HTML / CSS and Javascript

This is a fork of Joni Trythall's original pen with some added animation. She did most of the work, so send some love her way!

Thumbnail
This awesome code was written by lonekorean, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright lonekorean ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Hinged Twitter Button</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      .button-face {
  background-color: #55acee;
  border: none;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px, inset rgba(0, 0, 0, 0.2) 0px -1px 2px;
  text-align: center;
  animation: close 1s forwards, stay 1s forwards;
}

span {
  display: block;
}

.fa-twitter {
  color: white;
  font-size: 30px;
  margin-top: 5px;
  text-shadow: 1px 1px 1px #adadad;
}

.screw {
  width: 7px;
  height: 7px;
  background-color: gray;
  border-radius: 50%;
  border: 1px solid #3f3f3f;
  margin-left: 125px;
  top: 25px;
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px, inset rgba(0, 0, 0, 0.2) 0px -1px 2px;
  z-index: 5;
}

.line {
  height: 7px;
  width: 1px;
  background-color: #3f3f3f;
  margin-left: 3px;
}

a {
  color: black;
  height: 40px;
  width: 140px;
  text-decoration: none;
  position: absolute;
  left: 50%;
  margin-left: -70px;
  top: 100px;
}

.handle {
  z-index: -1;
  margin-top: -61px;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  font-size: 16px;
  position: relative;
  background-color: #f2f2f2;
  color: #3f3f3f;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px, inset rgba(0, 0, 0, 0.2) 0 -1px 2px;
  font-family: 'Archivo Narrow', sans-serif;
}

h4 {
  margin-left: 4px;
  font-family: 'Archivo Narrow', sans-serif;
  line-height: 40px;
}

a:hover .button-face {
  animation: open 1s forwards, stay 1s forwards;
}

@keyframes open {
  0% {
    transform-origin: 128px 30px;
  }
  25% {
    transform-origin: 128px 30px;
    transform: rotate(-120deg);
  }
  50% {
    transform-origin: 128px 30px;
    transform: rotate(-70deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(-90deg);
  }
}
@keyframes close {
  0% {
    transform-origin: 128px 30px;
    transform: rotate(-90deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  }
}
@keyframes stay {
  0% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  }
}

    </style>

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

</head>

<body>

  <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>

<a href="#">
  <span class="button-face">
    <i class="fa fa-twitter"></i>
  </span>
  <span class="handle">
    <h4>@jonitrythall</h4>
  </span>
  <span class="screw">
    <span class="line"></div>
  </span>
</a>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/lonekorean/hinged-twitter-button-qfgLK */
.button-face {
  background-color: #55acee;
  border: none;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  z-index: 1;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px, inset rgba(0, 0, 0, 0.2) 0px -1px 2px;
  text-align: center;
  animation: close 1s forwards, stay 1s forwards;
}

span {
  display: block;
}

.fa-twitter {
  color: white;
  font-size: 30px;
  margin-top: 5px;
  text-shadow: 1px 1px 1px #adadad;
}

.screw {
  width: 7px;
  height: 7px;
  background-color: gray;
  border-radius: 50%;
  border: 1px solid #3f3f3f;
  margin-left: 125px;
  top: 25px;
  position: absolute;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 2px 3px, inset rgba(0, 0, 0, 0.2) 0px -1px 2px;
  z-index: 5;
}

.line {
  height: 7px;
  width: 1px;
  background-color: #3f3f3f;
  margin-left: 3px;
}

a {
  color: black;
  height: 40px;
  width: 140px;
  text-decoration: none;
  position: absolute;
  left: 50%;
  margin-left: -70px;
  top: 100px;
}

.handle {
  z-index: -1;
  margin-top: -61px;
  border-radius: 5%;
  width: 140px;
  height: 40px;
  font-size: 16px;
  position: relative;
  background-color: #f2f2f2;
  color: #3f3f3f;
  box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px, inset rgba(0, 0, 0, 0.2) 0 -1px 2px;
  font-family: 'Archivo Narrow', sans-serif;
}

h4 {
  margin-left: 4px;
  font-family: 'Archivo Narrow', sans-serif;
  line-height: 40px;
}

a:hover .button-face {
  animation: open 1s forwards, stay 1s forwards;
}

@keyframes open {
  0% {
    transform-origin: 128px 30px;
  }
  25% {
    transform-origin: 128px 30px;
    transform: rotate(-120deg);
  }
  50% {
    transform-origin: 128px 30px;
    transform: rotate(-70deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(-90deg);
  }
}
@keyframes close {
  0% {
    transform-origin: 128px 30px;
    transform: rotate(-90deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  }
}
@keyframes stay {
  0% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  }
  100% {
    transform-origin: 128px 30px;
    transform: rotate(0deg);
  }
}

Comments