Eddies Buttons

Tutorials of (Eddies buttons) by Dovid weisz

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Eddies Buttons</title>
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  

<div ng-app="myApp" ng-controller="Main">
  <div class="top-wrapper">
    <div class="button-container">
      <div>
        <div class="button" ng-style="{fontSize: fontSize + 'px'}" ng-class="[widthClass, smallClass, jumboClass, colorClass, ghostClass]">{{buttonText}}</div>
      </div>
      <div>
        <input type="text" ng-model="classNameCompilation" />
      </div>
    </div>
  </div>
  <div class="other-container">
    <div class="form-row">
      <label> Button Text<input ng-model="buttonText"></input></label>

    </div>
    <div class="form-row">
      <label> font size<input type="text" ng-model="fontSize" /></label>
    </div>
    <div class="form-row">
      <button class="button" ng-repeat="buttonColor in buttonColors" ng-class="[buttonColor, ghostClass]" ng-click="setColorClass($index)">
      {{buttonColor}}
    </button>
    </div>
    <div class="form-row">
      <button class="button primary-2" ng-click="toggleGhost()" ng-class="[colorClass, {ghost: ghostClass!= 'ghost'}]">ghost</button></div>
  <div class="form-row">
      <button class="button primary-2 loading">
        Loading
        <div class="blWrapper">
        <svg xmlns="http://www.w3.org/2000/svg" class="border-loader" >
          <linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%"   stop-color="red"/>
      <stop offset="100%" stop-color="purple"/>
    </linearGradient>
          <rect stroke="url(#linear)" class="still"  rx="4.5" />
          <rect stroke="url(#linear)" class="anim"  rx="4.5" />
        </svg>
        </div>
    </button></div>
      <div class="form-row">
        <button class="button small" ng-click="activateSmallClass()" ng-class="[ colorClass,ghostClass, {active: smallClass == 'small'}]">small</button>
      </div>
      <div class="form-row" ng-repeat="widthClass in widthClasses">
        <button class="button" ng-class="[widthClass, colorClass,ghostClass,  {active: widthClassIndex == $index && !$first}]" ng-click="toggleColorClass($index)">
      {{widthClass}}
       <span ng-if="$first">standard (default-width)</span>
    </button>
      </div>
      <div class="form-row">
        <button class="button jumbo" ng-click="activateJumboClass()" ng-class="[colorClass, ghostClass, {active: jumboClass == 'jumbo'}]">jumbo</button>
      </div>
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js'></script>

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

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
.button, button {
  display: inline-block;
  text-align: center;
  cursor: pointer;
  -webkit-appearance: none;
  vertical-align: middle;
  border-radius: 4px;
  margin: 1em;
  height: 2.5em;
  line-height: 2.5em;
  padding: 0 2em;
  font-weight: 600;
  border: 1px solid;
  background-color: #DFDFDF;
  color: #000;
  border-color: #DFDFDF;
}
.button.extended, button.extended {
  padding: 0 3em;
}
.button.x-extended, button.x-extended {
  padding: 0 4em;
}
.button.fit-width, button.fit-width {
  display: block;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  padding: 0;
}
.button.small, button.small {
  height: 2em;
  line-height: 2em;
  padding: 0 1em;
}
.button.jumbo, button.jumbo {
  height: 3.25em;
  line-height: 3.25em;
}
.button:hover, button:hover {
  background-color: #c9c9c9;
}
.button.ghost, button.ghost {
  background-color: transparent;
  color: #DFDFDF;
}
.button.ghost:hover, button.ghost:hover {
  background-color: rgba(223, 223, 223, 0.05);
}
.button.primary-1, button.primary-1 {
  background-color: #0A92CA;
  color: #FFF;
  border-color: #0A92CA;
}
.button.primary-1:hover, button.primary-1:hover {
  background-color: #0983b6;
}
.button.primary-1.ghost, button.primary-1.ghost {
  background-color: transparent;
  color: #0A92CA;
}
.button.primary-1.ghost:hover, button.primary-1.ghost:hover {
  background-color: rgba(10, 146, 202, 0.05);
}
.button.primary-2, button.primary-2 {
  background-color: #1A5888;
  color: #FFF;
  border-color: #1A5888;
}
.button.primary-2:hover, button.primary-2:hover {
  background-color: #206ba5;
}
.button.primary-2.ghost, button.primary-2.ghost {
  background-color: transparent;
  color: #1A5888;
}
.button.primary-2.ghost:hover, button.primary-2.ghost:hover {
  background-color: rgba(26, 88, 136, 0.05);
}
.button.secondary-1, button.secondary-1 {
  background-color: #D9E3ED;
  color: #415160;
  border-color: #D9E3ED;
}
.button.secondary-1:hover, button.secondary-1:hover {
  background-color: #baccde;
}
.button.secondary-1.ghost, button.secondary-1.ghost {
  background-color: transparent;
  color: #D9E3ED;
}
.button.secondary-1.ghost:hover, button.secondary-1.ghost:hover {
  background-color: rgba(217, 227, 237, 0.05);
}
.button.secondary-2, button.secondary-2 {
  background-color: #959fa9;
  color: #FFF;
  border-color: #959fa9;
}
.button.secondary-2:hover, button.secondary-2:hover {
  background-color: #838f9b;
}
.button.secondary-2.ghost, button.secondary-2.ghost {
  background-color: transparent;
  color: #959fa9;
}
.button.secondary-2.ghost:hover, button.secondary-2.ghost:hover {
  background-color: rgba(149, 159, 169, 0.05);
}
.button.load-more-btn-color, button.load-more-btn-color {
  background-color: #6a757e;
  color: #FFF;
  border-color: #6a757e;
}
.button.load-more-btn-color:hover, button.load-more-btn-color:hover {
  background-color: #5f6971;
}
.button.load-more-btn-color.ghost, button.load-more-btn-color.ghost {
  background-color: transparent;
  color: #6a757e;
}
.button.load-more-btn-color.ghost:hover, button.load-more-btn-color.ghost:hover {
  background-color: rgba(106, 117, 126, 0.05);
}

body {
  font-family: 'Open sans';
  font-size: 16px;
}

button {
  font-size: inherit;
  font-family: inherit;
}

.top-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: white;
}

.button-container {
  max-width: 500px;
  height: 100px;
  border: 1px solid black;
  text-align: center;
  padding: 1em;
  margin: 1em;
}
.button-container input {
  width: 300px;
}

.other-container {
  margin-top: 175px;
}

.form-row {
  margin: 1em;
  max-width: 500px;
  text-align: center;
}

.loading {
  position: relative;
}

.border-loader rect {
  /* position: absolute;
   $-offset: 0;
  top:$-offset;
  right:$-offset;
  left:$-offset;
  bottom: $-offset; */
  height: 100%;
  width: 100%;
}

.border-loader {
  /* position: absolute;
  $-offset: 0;
  top:$-offset;
  right:$-offset;
  left:$-offset;
  bottom: $-offset; */
  height: 100%;
  width: 100%;
}

.border-loader rect {
  fill: transparent;
  stroke-width: 3px;
  height: 100%;
  width: 100%;
}
.border-loader rect.still {
  stroke: green;
}
.border-loader rect.anim {
  -webkit-animation: dash 1s infinite;
          animation: dash 1s infinite;
}

@-webkit-keyframes dash {
  0% {
    stroke-dasharray: 0, 400%;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 400%, 0;
    stroke-dashoffset: 400%;
  }
  100% {
    stroke-dasharray: 0, 400%;
    stroke-dashoffset: 400%;
  }
}

@keyframes dash {
  0% {
    stroke-dasharray: 0, 400%;
    stroke-dashoffset: 0;
  }
  50% {
    stroke-dasharray: 400%, 0;
    stroke-dashoffset: 400%;
  }
  100% {
    stroke-dasharray: 0, 400%;
    stroke-dashoffset: 400%;
  }
}
.blWrapper {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  bottom: -1px;
  border-radius: 4px;
  overflow: hidden;
}
/* Downloaded from https://www.codeseek.co/ */
var widthClasses = ["", "extended", "x-extended", "fit-width"];
var buttonColors = ["primary-1",
  "primary-2",
  "secondary-1",
  "secondary-2",
  "load-more-btn-color",
  "tertiary-btn-color"
];
var app = angular.module('myApp', []);
app.controller('Main', function($scope) {
  $scope.buttonText = "Add to Cart";
  $scope.fontSize = "16";
  
  $scope.smallClass = "";
  $scope.colorClass = "";
  $scope.ghostClass = "";
  $scope.widthClass = "";
  $scope.jumboClass = "";

  $scope.widthClasses = widthClasses;
  $scope.buttonColors = buttonColors;
  $scope.setWidthClass = function(i) {
    $scope.widthClassIndex = i;
    $scope.smallClass = "";
    $scope.widthClass = widthClasses[i];
    setClassnameCompilation();
  }
  $scope.toggleColorClass = function(i){
    var index = $scope.widthClassIndex != i ? i : 0;
    $scope.setWidthClass(index);
  }
  $scope.toggleGhost = function() {
    $scope.ghostClass = $scope.ghostClass == "" ? "ghost" : "";
    setClassnameCompilation();
  }
  $scope.setColorClass = function(i) {
    var newColorClass = buttonColors[i];
    if (newColorClass !== $scope.colorClass) {

      $scope.colorClass = buttonColors[i];
    } else {
      $scope.colorClass = "";
    }
    $scope.colorClassIndex = i;
    setClassnameCompilation();
  }
  $scope.setWidthClass(0);
  $scope.activateSmallClass = function() {
    if($scope.smallClass == "small"){
      $scope.smallClass = "";
    }else{
      $scope.setWidthClass(0);
      $scope.jumboClass = "";
      $scope.smallClass = "small";
    }
    setClassnameCompilation();
  }
  $scope.activateJumboClass = function() {
    if( $scope.jumboClass == "jumbo"){
      $scope.jumboClass = "";
    }else{
      $scope.smallClass = "";
    $scope.jumboClass = "jumbo";
    }
    
    setClassnameCompilation();
  }

  function setClassnameCompilation() {
    var classNameCompilation = `button ${$scope.widthClass} ${$scope.smallClass} ${$scope.jumboClass} ${$scope.colorClass} ${$scope.ghostClass}`;
    $scope.classNameCompilation = classNameCompilation.replace(/\s+/g, " ");
  }
});

This awesome code ( Eddies Buttons ) is write by Dovid Weisz, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Dovid Weisz