CODEWITHSUNDEEP
javascripthtmlcss
Guilherme Felipe Reis
Guilherme Felipe Reis

Reputation: 918

The parent Box-shadow above the clickable button

I am trying to design this button from the image below. However, I couldn't add the Box-shadow in the top with the border-radius and make the buttons clickable. How can I make the button clickable? I am using React and Styled component, maybe some JS would solve the problem? enter image description here

.wrapper{
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 39px;
}

.tabs{
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  background: #EFF4F5;
  border-radius: 16px;
  position: relative;
}

.tabs:before{
  content:'';
    position:absolute;
    top:0;
    left: 0;
    width:100%;
    height:100%;
    box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.2); 
    border-radius: 16px;
}

.tab-button{
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  background: #EFF4F5;
  box-shadow: inset 0px -1px 0px rgba(14, 14, 44, 0.02);
  border-radius: 16px;
  border: none;
  color: #1f2bd4;
}

.button-active{
  background: #1f2bd4;
  box-shadow: inset 0px -1px 0px rgba(14, 14, 44, 0.2);
  border-radius: 16px;
  color: #FFFFFF;
}
<div class="wrapper">
<div class="tabs"> 
  <button class="tab-button button-active">Click here</button>
  <button class="tab-button">Click here</button>
</div>
</div>

Upvotes: 1

Views: 214

Answers (1)

doğukan
doğukan

Reputation: 27421

Just add pointer-events: none; to ::before. This will solve your problem in this case.

.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 39px;
}

.tabs {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0px;
  background: #EFF4F5;
  border-radius: 16px;
  position: relative;
}

.tabs:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-shadow: inset 0px 2px 2px -1px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  pointer-events: none;
}

.tab-button {
  cursor: pointer;
  outline: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 12px;
  background: #EFF4F5;
  box-shadow: inset 0px -1px 0px rgba(14, 14, 44, 0.02);
  border-radius: 16px;
  border: none;
  color: #1f2bd4;
}

.button-active {
  background: #1f2bd4;
  box-shadow: inset 0px -1px 0px rgba(14, 14, 44, 0.2);
  border-radius: 16px;
  color: #FFFFFF;
}
<div class="wrapper">
  <div class="tabs">
    <button class="tab-button button-active">Click here</button>
    <button class="tab-button">Click here</button>
  </div>
</div>

Upvotes: 1

Related Questions