JSFiddle - React, Tailwind, and code Playground

by Alexander Branchugov

HTML

<script src="https://code.angularjs.org/1.6.6/angular.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<div ng-app="myApp">
<div ng-controller="MyCtrl">
 <button ng-class="{active: buttonIsActive}"
         ng-click="click()"
 >
   Это гребаная кнопка {{buttonIsActive}}
  </button></div>
</div>

CSS

.example {
  transition: all .2s;
}
.red {
  color: red;
}
.bold {
  font-weight: 600;
}
.underline {
  text-decoration: underline;
}


@keyframes pulse-red {
  0% {
    box-shadow: 0 0 0 0 rgba(255,0,0, 0.4);
  }
  70% {
    box-shadow: 0 0 0 6px rgba(255,0,0, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(255,0,0, 0);
  }
}

button {
  background: #fff;
  border: 1px solid red;
  border-radius: 4px;
  color: red;
  padding: 8px 12px;
  outline: 0!important;
  margin: 20px;
}

button.active {
  animation: pulse-red .7s ease normal;
}

JavaScript

var myApp = angular.module('myApp', []);
var MyCtrl = myApp.controller('MyCtrl', function MyCtrl($scope, $timeout) {
$scope.buttonIsActive = false;
$scope.t = null;


	$scope.click = function () {
  $scope.buttonIsActive = false;
  $timeout( function () {
      $scope.buttonIsActive = true;

      $timeout.cancel($scope.t);

      $scope.t = $timeout( function () {
        $scope.buttonIsActive = false;
      }, 500);
      });
  }
});