Search code examples
csshoverborder-image

background-image in hover doesn't works properly

I am trying to add a hover effect which adds background-image when a user hovers on the button but on hover there is a little area left on the left side which is still transparent.

Basically, I added two buttons, next to each other and the problem is with the 2nd button, if I remove first one or move 2nd to next line then it works totally fine.

Here is what am I getting. Not Working

Here is how it looks if I remove the first button Working Image

Here is the code

.gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    
}
<section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>

Solution

  • In some screen sizes, background is not starting from the left most; which is why it leaves a small gap (white line).

    You can add background-origin: border-box; to .gradient-button-2:hover. A good explanation and a live example can be found here at MDN:

    The background-origin CSS property sets the background positioning area. In other words, it sets the origin position of an image set with the background-image property.

    .gradient-button-1 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to top right, orangered,yellow);
    
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}

.gradient-button-1:hover {
    background-image: linear-gradient(to top right, orangered,yellow);
    color: white;
}

.gradient-button-2 {
    color: orangered;
    background: none;
    padding: 1.5rem 3rem;
    font-size: 1.3rem;
    border: solid 10px transparent;
    border-image: linear-gradient(to right, orangered,transparent);
    border-image-slice: 1;
    outline: none;
    transition: all ease 0.3s;
}
.gradient-button-2:hover {
    background-image: linear-gradient(to right, orangered,transparent);
    border-right: none;
    border-right-style: none;
    color: white;
    background-origin: border-box; /* This line is new! */
}
    <section>

          <h4>Gradient Bordered Buttons</h4>
          <button type="button" name="button" class="gradient-button-1">Gradient button 1</button>
          <button type="button" name="button" class="gradient-button-2">Gradient button 2</button>

        </section>