CODEWITHSUNDEEP
javascripthtmlcssbutton
Mira Stenvik Granly
Mira Stenvik Granly

Reputation: 19

Remove shadow from a button when its active

I have a button with javascript attached. When you click the button a hidden box will appear, when you click another one, the first box gets replaced with the second and so on. When my button is active, when the box is visible, it gets a shadow around. And i don´t want that! I tried to use the following css codes:

.nav > button{
    width: auto;
    font-family: 'OpenSansBold';
    color: #000;
    padding: 3px;
    border: none;
    margin-right: 10px;
    margin-top: 5px;
    font-size: 15px;
    text-align: left;
    background-color: #fff;
}

button:hover{
    cursor: pointer;
    border: none;
    color: #7b1a2c;
}
button:visited{
    font-family: 'OpenSansBold';
    box-shadow: none;
}

button:active{
    box-shadow: none;
}

But with no luck. Is there another CSS code for buttons when its active?

I have no clue about javascript, just copy pasted this thing. Maybe this is something that can be fixed in the js code? Just in case, I can show you guys: 

$('div.box').slice(1).addClass('hidden');

$('.nav').children('button').on('click', function(){
    // console.log('klikk');
    $(this).data('content');

    $('.box').not('hidden').addClass('hidden');
    $( $(this).data('content')).removeClass('hidden');
});

Upvotes: 0

Views: 1195

Answers (2)

oboshto
oboshto

Reputation: 3627

Maybe you talk about outline property or :focus pseudo-class?

Try this one:

button:active, button:focus {
  box-shadow: none;
  outline: 0;
}

Upvotes: 2

Randy
Randy

Reputation: 9809

To give you a working example, play around with the following snippet, I think this behaves like you would want it to.

To completely remove the shadow, just remove the second JS rule.

// :active rules
$('button').on('mousedown', function () {
  $(this).css('box-shadow', 'none');
});

// :visited rules
$('button').on('mouseup', function () {
  $(this).css('box-shadow', '10px 10px 5px #888888');
});
button {
    width: 300px;
    height: 100px;
    background-color: yellow;
    box-shadow: 10px 10px 5px #888888;
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>

<body>
    <button>test</button>
</body>

Upvotes: 0

Related Questions