CODEWITHSUNDEEP
htmlcss
dayo
dayo

Reputation: 27

How to deal with the hover issue of overlapped non-square DIV?

I want to create custom button.
However, the hover function doesn't works correctly due to the overlapped pseudo elements.
How can I fix it? Thanks.

The core css is shown below:

  #left-btn{
    background: #007bff;
  }

  #left-btn::after{
    content: "";
    margin-left: 8vw;
    display: block;
    border-style: solid;
    border-width: 30px 0 0 45px;
    border-color: transparent transparent transparent #007bff;        
  }

  #right-btn{
    background: #BF2C36;
    margin-left: 45px;
  }
  #right-btn::before{
    content: "";
    display: block;
    margin-left: -45px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 45px 30px 0;
    border-color: transparent #BF2C36 transparent transparent;   
  }

  #right-btn:hover{
    cursor: pointer;
    background: #710305;
  }
  #right-btn:hover::before {
    border-right-color: #710305;
    cursor: pointer;
  }

  #left-btn:hover{
    cursor: pointer;
    background: #0062CC;
  }      
  #left-btn:hover::after {
    border-right-color: #0062CC;
    cursor: pointer;
  }

or jsfiddle

Upvotes: 2

Views: 131

Answers (2)

Tushar
Tushar

Reputation: 4418

You can do it like this

CSS

#left-btn::after{    
    right: -23px;
    background: #007bff;
  }
  #right-btn::before{
    left: -23px;
    background: #bf2c36;

  }
#left-btn::after,
#right-btn::before {
  -moz-transform: skew(56deg, 0deg);     
  -webkit-transform: skew(56deg, 0deg);     
  transform: skew(56deg, 0deg); 
  position: absolute;
  top:0;
  width: 50px;
  height: 30px;
  content: "";
  display: block;
}

Upvotes: 1

Alex Wilson
Alex Wilson

Reputation: 2419

try this CODEPEN DEMO HTML

<div class="btn-set">
  <div id="left-btn"></div>
  <div id="right-btn"></div>
</div>

CSS

.btn-set{
    display:inline-block;
  }
  #left-btn,#right-btn{
    height:30px;
    width:8vw;
    display: inline-block;
  }

  #left-btn{
    background: #007bff;
border-width: 30px 0 0 45px;
  }

  #left-btn::after{
    content: "";
    margin-left: 8vw;
    display: block;
    border-style: solid;
    border-width: 30px 0 0 45px;
    border-color: transparent transparent transparent #007bff;        
  }

  #right-btn{
    background: #BF2C36;
    margin-left: 45px;
  }
  #right-btn::before{
    content: "";
    display: inline-block;
    margin-left: -45px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 45px 30px 0;
    border-color: transparent #BF2C36 transparent transparent;   
  }

  #right-btn:hover{
    cursor: pointer;
    background: #710305;

  }
  #right-btn:hover::before {
    border-right-color: #710305;
    cursor: pointer;
  }

  #left-btn:hover{
    cursor: pointer;
    background: #0062CC;
  }      
  #left-btn:hover::after {
    border-left-color: #0062CC;
    cursor: pointer;
  }

Upvotes: 0

Related Questions