Unable to get hover background color work with diagonal cut in CSS

Question

I'm unable to get the hover background color timing to sync with :before. How can I fix this issue? When you hover over the button, you will notice the transition of the background color is not in sync.

JSFIDDLE DEMO: https://jsfiddle.net/7c25wmuz/

.btn-primary {
  background-color: #2c9ff5;
  border-color: #2c9ff5;
  text-transform: capitalize;
}

.btn.btn-primary:hover {
  background-color: #45aff6;
  border-color: #45aff6;
}

.btn-donate {
  background-color: #053a86;
  color: #fff;
  margin-left: 15px;
  padding-left: 40px;
  padding-right: 30px;
  padding-top: 2px;
  text-transform: uppercase;
  border-radius: 4px 0 0 4px;
  height: 30px;
  position: relative;
  border: none;
}

.btn-donate:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  border-top: 30px solid white;
  border-right: 20px solid #053a86;
  width: 0;
}

.btn-donate:hover::before {
  border-right: 20px solid #45aff6;
}

<a href="#" class="btn btn-primary btn-donate">Donate</a>

don't use border for this, use clip-path: https://stackoverflow.com/q/30441122/8620333 — Temani Afif, Sep 28 '22 at 20:36

score 2 · Answer 1 · answered Sep 28 '22 at 20:44

2

Clip path is the solution you need for something like this.

.btn-primary {
    background-color: #2c9ff5;
    border-color: #2c9ff5;
    text-transform: capitalize;
    clip-path: polygon(20% 0, 100% 0, 100% 100%, 0% 100%);
}
.btn.btn-primary:hover {
    background-color: #45aff6;
    border-color: #45aff6;
}
.btn-donate {
    background-color: #053a86;
    color: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
    padding-top: 2px;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
    height: 30px;
    position: relative;
    border: none;
    transition: .5s all ease;
}

<a href="#" class="btn btn-primary btn-donate">Donate</a>

answered Sep 28 '22 at 20:44

offoffoff

204
4

missing css `text-decoration: none;` – Mister Jojo Sep 28 '22 at 20:52
1

that's not at all relevant to what they asked – offoffoff Sep 28 '22 at 21:04
it's true, but it's still missing. do you want me to withdraw my comment? – Mister Jojo Sep 28 '22 at 21:37
I have used another solution which is to use transition effect. I will read up on clip functionalities. Thank you. – Elaine Byene Sep 29 '22 at 03:22

score 1 · Answer 2 · answered Sep 28 '22 at 20:54

It seems you runned into conflict with browser default styles. You can see default styles in your Developer tools (F12) you just need to enable it. Go to developer tools settings and check "Show browser styles".

This issue can be simply fixed by overriding default styles with your own.

body {
  margin-top: 15px;
}

.btn {
  transition: unset; /* override, this is all you need */
  
  
  display: block;
  height: 30px;
}

.btn-primary {
    background-color: #2c9ff5;
    border-color: #2c9ff5;
    text-transform: capitalize;
}
.btn.btn-primary:hover {
    background-color: #45aff6;
    border-color: #45aff6;
}
.btn-donate {
    background-color: #053a86;
    color: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
  padding-top: 2px;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
  height: 30px;
  position: relative;
  border: none;
}
.btn-donate:before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0;
  border-top: 30px solid white;
  border-right: 20px solid #053a86;
  width: 0;
}
.btn-donate:hover::before {
    border-right: 20px solid #45aff6;
}

<a href="#" class="btn btn-primary btn-donate">Donate</a>

Yes maybe it's hard to see, there is a comment on one of css lines in the beginning of the file. — AssGoblin69, Sep 29 '22 at 05:50

score 1 · Accepted Answer · answered Sep 28 '22 at 21:27

You can just add a background transition to .btn-donate and border transition to .btn-donate:before like so: (added padding bottom to see things)

body {
  margin-top: 15px;
}
.btn-primary {
    background-color: #2c9ff5;
    border-color: #2c9ff5;
    text-transform: capitalize;
}
.btn.btn-primary:hover {
    background-color: #45aff6;
    border-color: #45aff6;
}
.btn-donate {
    background-color: #053a86;
    color: #fff;
    margin-left: 15px;
    padding-left: 40px;
    padding-right: 30px;
  padding-top: 2px;
  padding-bottom: 1rem;
    text-transform: uppercase;
    border-radius: 4px 0 0 4px;
  height: 30px;
  position: relative;
  border: none;
  transition: .3s  ease background;
}
.btn-donate:before {
  content: '';
  position: absolute;
  top: 0; 
  left: 0;
  border-top: 30px solid white;
  border-right: 20px solid #053a86;
  width: 0;
  transition: .3s ease border;
}
.btn-donate:hover::before {
    border-right: 20px solid #45aff6;
}

<a href="#" class="btn btn-primary btn-donate">Donate</a>

Unable to get hover background color work with diagonal cut in CSS

3 Answers3