Edit in JSFiddle

Result
JavaScript
HTML
CSS

// declare a module
var myApp = this.angular.module('myApp', ['ngAnimate']);

// declare a controller
myApp.controller('myCtrl', function ($scope) {
    $scope.showButton = true;
    $scope.toggleButton = function(){
        $scope.showButton = !$scope.showButton;
    }
});

<!-- stitch this with the module declare in Javascript -->
<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <div class="animate-show" ng-show="showButton">
            <button>Empty Button</button>
        </div>
        <input type="checkbox" id="chkBox" ngClick="toggleButton" ng-model="showButton"/>Show Button
    </div>
</body>

.animate-show {
   -webkit-transition:all linear 0.5s;
   transition:all linear 0.5s;
   opacity:1;
}
 
.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
   display:block!important;
}
 
.animate-show.ng-hide {
   line-height:0;
   opacity:0;
   padding:0 10px;
}