search

djibe / material

Material Design 2 for Bootstrap 4 (active fork of Daemonite Material)
https://djibe.github.io/material/
MIT License
68 stars 11 forks source link

White Overlay on Button #33

Closed gaurav2103 closed 3 years ago

gaurav2103 commented 3 years ago

image

When I click on the reset button a white overlay comes on button again if I click it goes.

I don't want this how to achieve this

I want a button like this image

tbuyle commented 3 years ago

It seems that this is due to the button being on focus.

See below for info on the CSS. But rather than changing the CSS, I'd recomend changing the behviour of you site / app so that, once reset is triggered, the button goes out of focus. Focused style are there for usability purpose.

The code for the white overlay in in _button.scss. Right after the 'Alternate buttons' comment, there is a loop trough $color, with rules for for &:focus, &.focus.

The actual rule for the white overlay is

background-image: linear-gradient(to bottom, rgba($white, $overlay-focus-colored-opacity), rgba($white, $overlay-focus-colored-opacity));

You'll have to add you own css to set background-image: none to your button.

gaurav2103 commented 3 years ago

@tbuyle thanks for the suggestions and help