How to create Bootstrap like border on click in CSS

user_3722884 0
Viewed 74

I have created a hamburger menu in CSS. I want to do two things:

  • When a user clicks on it, create bootstrap like border (light colored) as shown in figure below.
  • Invert colors when user clicks/hovers on hamburger i.e. change my hamburger border to black, background to white and inner divs to follow same pattern. For this I added a css :hover, but don't know how to do that for child elements to follow parent.
.hamburger:hover {
      background-color: whitesmoke;
    }

enter image description here

Code: https://jsfiddle.net/rcxfwdm9/7/

bootstrap-4 twitter-bootstrap css html
2 Answers

You can combine multiple css selectors together

.hamburger:hover

means selecting all elements with hamburger class when hovering

.hamburger div

means selecting all div elements inside element with hamburger class

So when combining

.hamburger:hover div

This means selecting all div elements inside element with hamburger class when hovering

.hamburger, hamburger div {
    transition: all .15s;
}

.hamburger div {
    margin: 0.4rem 0px;
    border: 1px solid white;
    background-color: white;
    border-radius: 5px;
}

.hamburger:hover div {
  border-color: #343a40;
}
.hamburger:hover {
  box-shadow: 0 0 0 .2rem rgba(108,117,125,.5);
  background-color: white;
  border-color: #343a40;
}

Demo

https://jsfiddle.net/vyr6bc8f/18

user_94494260

You can do this using CSS box-shadow.

Example:

.btn-grey {
  border: none;
  outline: none;
  padding: 5px;
  background-color: grey;
  border-radius: 5px;
  transition-duration: 0.5s;
  color: white;
}

.btn-grey:focus {
  box-shadow: 0 0 0 3px darkgray;
}
<button class='btn-grey'>Button</button>

user_129845670
Related