JSFiddle - React, Tailwind, and code Playground

by Gary Pyne

HTML

<div ng-app="myApp" ng-controller="clickToggle">

<div class="circle" ng-class="class" ng-click="changeClass()">1</div>

</div>

CSS

.circle {
  border:1px solid black;
  background-color:white ;
  box-sizing:border-box!important;
  border-radius:200px!important;
  font:30px 'Roboto';
  font-weight:400;
  padding:10px,10px,10px,10px;
  color:black;
  text-align:center;
  width:80px;
  height:80px;
  display:inline-block;
  float:left;
  overflow:hidden;
  line-height:80px;

}

.circleFilled {
  border:1px solid black;
  background-color:blue ;
  box-sizing:border-box!important;
  border-radius:200px!important;
  font:30px 'Roboto';
  font-weight:400;
  padding:10px,10px,10px,10px;
  color:black;
  text-align:center;
  width:80px;
  height:80px;
  display:inline-block;
  float:left;
  overflow:hidden;
  line-height:80px;
  }
  
  .circle:hover {
    font-weight:400;
  background:#9fa8da ;

  color:#f7f3eb;
  z-index:9999;
}

JavaScript

var app = angular.module("myApp",[]);

app.controller("clickToggle",function($scope){

    $scope.class = "circle";

    $scope.changeClass = function(){
        if ($scope.class === "circle")
            $scope.class = "circleFilled";
         else
           $scope.class = "circle"
    };

});