A Pen by Daniel Hinds-Bond

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

Technologies

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

<head>
  <meta charset="UTF-8">
  <title>A Pen by  Daniel Hinds-Bond</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet prefetch' href='css/vebaf.css'>

  
  
</head>

<body>

  <div class="container" data-ng-app="app" data-ng-controller="buttonCtrl">
  
  <div class="button button90" ng-show="showButtons">
    <p>Button 1</p>
  </div>
  <div class="line line90" ng-show="showButtons"></div>
  
  <div class="button button45" ng-show="showButtons">
    <p>Button 1</p>
  </div>
  <div class="line line45" ng-show="showButtons"></div>
  
  <div class="button button135" ng-show="showButtons">
    <p>Button 1</p>
  </div>
  <div class="line line135" ng-show="showButtons"></div>
  
  <div class="button button324" ng-show="showButtons">
    <p>Button 1</p>
  </div>
  <div class="line line324" ng-show="showButtons"></div>
  
  <div class="button button72" ng-show="showButtons">
    <p>Button 1</p>
  </div>
  <div class="line line72" ng-show="showButtons"></div>
  
  <div class="start-button" ng-click="showButtons = !showButtons" data-ng-class="{'active': showButtons}">
    <div class="button"><p>Choose</p></div>
  </div>
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://code.angularjs.org/1.2.1/angular.min.js'></script>
<script src='https://code.angularjs.org/1.2.1/angular-animate.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/007design/a-pen-by-daniel-hinds-bond-qEPgqj */
angular.module('app', ['ngAnimate'])
.controller('buttonCtrl', function($scope){
  $scope.showButtons = true;
});

Comments