Angularjs/Bootstrap - how to create a stateless button

Question

Using Bootstrap and Angularjs I'd like to create a button that doesn't ever appear to be "active". I'd like the button to darken slightly when the mouse is over it, and I'd like it to darken further when it's clicked. When the mouse leaves the button, however, I'd like it to return to its original appearance.

Semantically, I'm using the button to "reset" part of my app. I want to execute some code when it's clicked. After it's been pressed, though, it doesn't make sense for the button to remain in a "depressed" state.

Here's a live example.

Any ideas?

Looks like you have that now. – Fresheyeball Mar 31 '14 at 22:44 — Fresheyeball, Mar 31 '14 at 22:44

BenCr · Answer 1 · 2014-03-31T22:58:31.817

0

I'd give it another class, say btn-reset and add the following CSS.

// the order of these two is also important
.btn-reset:hover{
    background-color: Dark !important;
}

.btn-reset:active{
    background-color: Darkest !important;
}

// you need this to reset it after it's been clicked and released
.btn-reset:focus{
    background-color: Normal !important;
}

It's working here http://plnkr.co/edit/QVChtJ8w70HXmyAaVY4A?p=preview

The issue is that the :focus pseudo class has a darker colour than the standard button so after it's been clicked it still has focus so still has the darker colour, if you want to stick with the standard colours you can just add a new selector for the :focus pseudo class.

edited Mar 31 '14 at 22:58

answered Mar 31 '14 at 22:46

BenCr

5,991
5
44
68

This seemed to work in the Chrome developer tools but I can't get it to stick in the plunkr example – BenCr Mar 31 '14 at 22:51
I was spelling "color" colour instead of incorrectly. – BenCr Mar 31 '14 at 22:53

score 0 · Accepted Answer · answered Mar 31 '14 at 23:02

Alternatively you could use the ng-mouseenter and ng-mosueleave directives.

For example:

<div ng-app="ButtonApp">
    <div ng-controller="MainCtrl">
        <button ng-class="buttonClass" 
                ng-mouseenter="onMouseEnter()" 
                ng-mouseleave="onMouseLeave()"> Click Me!
    </div>
</div>

And in your controller:

var app = angular.module('ButtonApp',[]);
app.controller('MainCtrl', ['$scope',function($scope){

    var defaultButtonClass = ['btn','btn-foxtrot'];
    $scope.buttonClass = defaultButtonClass;

    $scope.onMouseEnter = function(){
        $scope.buttonClass = ['btn','btn-bravo'];
    };

    $scope.onMouseLeave = function() {
        $scope.buttonClass = defaultButtonClass;
    }

}]);

You can see my JSFiddle.

To generate the button colors you could use something like Beautiful Buttons for Twitter Bootstrappers.

Angularjs/Bootstrap - how to create a stateless button

2 Answers2