Eddies Buttons

In this example below you will see how to do a Eddies Buttons with some HTML / CSS and Javascript

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

Technologies

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

<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 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/dovidweisz/eddies-buttons-aBBbYz */
.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/dovidweisz/eddies-buttons-aBBbYz */
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, " ");
  }
});

Comments