<div ng-app="ngAcKapa">
  <div ng-controller="acKapaCntrl">
    <button ng-click="acKapa=!acKapa" ng-class="{'ac-kapa': acKapa}">aç-kapa</button>
    <div ng-show="acKapa">
      Sular seller gibi
    </div>
  </div>
</div>
button {
  display: inline-block;
  border-radius: .25em;
  box-shadow: 0 1px 0 0 rgba(0,0,0,0.2),inset 0 -1px 0 0 rgba(0,0,0,0.3);
  background-image: linear-gradient(to bottom,#43a6e2,#277ac1);
  color: #fff;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  padding: 10px 20px;
  line-height: 1.1;
  border: 0;
  cursor: pointer;
  font-family: 'Open Sans',X-LocaleSpecific,sans-serif;
  outline: 0;
}

button + div {
  background: #f5f1e8;
  padding: 20px;
  font-family: 'Open Sans',X-LocaleSpecific,sans-serif;
  color: #333;
  font-size: 24px;
  margin-top: 20px;
}

.ac-kapa {
  color: black;
}
angular.module('ngAcKapa', [])
    .controller('acKapaCntrl',['$scope', function($scope){
        $scope.acKapa = false;
}]);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/angularjs/1.3.2/angular.min.js