Plunker + AngularJS

angular.module('plunker', [])
  .directive('swedeButton', function(){
    var count = 0;
    var funstuff = function(elem){
      var num = Math.floor((Math.random() * count) + 1);
      elem.css('top', num + 'px');
    }
    
    return {
      restrict: 'E',
      replace: true,
      template: '\
        <button ng-click="magic()">Jag är svensk</button>',
      link: function(scope, elem, attrs){
        scope.magic = function(){
          elem.parent().toggleClass('yellow');
          count++;
          if (count >= 10 && count % 2 == 0){
            funstuff(elem);
          }
        }
      }
    }
  })

<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
  <div class="box blue">
    <swede-button></swede-button>
  </div>
</body>
</html>

/* Put your css in here */

.box {
  width: 400px;
  height: 400px;
  margin: 0 auto;
}

.blue {
  background: blue;
}

.yellow {
  background: yellow;
}

.box button {
  height: 50px;
  position: relative;
  top: 150px;
  left: 150px;
}