skip to Main Content

It’s very weird bug, everythings looks okay but bottom border is very small when using padding, I writed another line that the bottom border would be bigger then top, it maked but there is a space: Bottom border

So my request would, if its possible to make that bottom border would be normal like top border and without that weird bug.

EDIT:
I found out that the width changes when I change zoom level in browser, so I want to make it not resizable in width.

.transfer {
  display: flex;
  justify-content: center;
  padding: 1vw;
  background-color: #12121d;
  border-top: 0.4vw solid #12121d;
  border-bottom: 0.4vw solid #12121d;
  border-left: none;
  border-right: none;
  width: 100%;
}

.transfer:hover {
  cursor: pointer;
  animation: border-anim 1s infinite;
  background-color: rgb(50, 158, 50);
  transition: 0.3s;
  }

  @keyframes border-anim {
    0% {
      border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(50, 158, 50)) 1;
    }
    20% {
      border-image: linear-gradient(90deg, rgb(174, 248, 174), rgb(50, 158, 50), rgb(50, 158, 50)) 1;
    }
    40% {
      border-image: linear-gradient(90deg, rgb(174, 248, 174), rgb(174, 248, 174), rgb(50, 158, 50)) 1;
    }
    60% {
      border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(174, 248, 174), rgb(174, 248, 174)) 1;
    }
    80% {
      border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(174, 248, 174)) 1;
    }
    100% {
      border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(50, 158, 50)) 1;
    }
  }
<div class="transfer">
  <p>Transfer</p>
  <i class="fas fa-paper-plane"></i>
</div>

2

Answers


  1. This was the code which I ran on my pc and everything worked absolutely fine

    <!doctype html>
    <html lang="en">
      <head>
        <!-- Required meta tags -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="description" content="Driving School Website">
        <meta name="keywords" content="DRIVE, CAR, DRIVING SCHOOL, LAERN TO DRIVE, DRIVING">
        <meta name="robots" content="INDEX, FOLLOW">
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <link rel="icon" type="image/x-icon" href="static/log.png" class="logo">
        <title>A</title>
        <!-- <script src="app.js"></script> -->
        <style>
            .transfer 
            {
                display: flex;
                justify-content: center;
                padding: 1vw;
                background-color: #12121d;
                border-top: 0.4vw solid #12121d;
                border-bottom: 0.4vw solid #12121d;
                border-left: none;
                border-right: none;
                width: 100%;
            }
            .transfer:hover 
            {
                cursor: pointer;
                animation: border-anim 1s infinite;
                background-color: rgb(50, 158, 50);
                transition: 0.3s;
            }
            @keyframes border-anim 
            {
                0% 
                {
                    border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(50, 158, 50)) 1;
                }
                20% 
                {
                    border-image: linear-gradient(90deg, rgb(174, 248, 174), rgb(50, 158, 50), rgb(50, 158, 50)) 1;
                }
                40% 
                {
                    border-image: linear-gradient(90deg, rgb(174, 248, 174), rgb(174, 248, 174), rgb(50, 158, 50)) 1;
                }
                60% 
                {
                    border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(174, 248, 174), rgb(174, 248, 174)) 1;
                }
                80% 
                {
                    border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(174, 248, 174)) 1;
                }
                100% 
                {
                    border-image: linear-gradient(90deg, rgb(50, 158, 50), rgb(50, 158, 50), rgb(50, 158, 50)) 1;
                }
            }
        </style>
      </head>
      <body>
    
        <br><br><br>
        <div class="transfer">
    
        </div>
        <!-- jQuery first, then Popper.js, then Bootstrap JS -->
        <!-- <script src="static/client.js"></script> -->
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
      </body>
    </html>

    Now, still if you have any issues then do mail me on [email protected] so that I can assist you further

    Login or Signup to reply.
  2. .transfer {
      display: flex;
      justify-content: center;
      padding: 1vw;
      background-color: #12121d;
      width: 100%;
      position: relative;
    }
    
    .transfer:before {
      content: "";
      position: absolute;
      inset: 0;
      top: -0.4vw;
      bottom: -0.4vw;
      background: transparent;
    }
    
    @property --delimiter {
      syntax: "<length> | <percentage>";
      inherits: false;
      initial-value: 0%;
    }
    
    .transfer:hover:before {
      --delimiter: 0%;
      background-image: linear-gradient(to right, lime var(--delimiter), green var(--delimiter) 100%);
      z-index: -1;
      animation: borderAnimation 500ms ease infinite;
    }
    
    .transfer:hover {
      cursor: pointer;
      background-color: rgb(50, 158, 50);
      transition: background 500ms ease;
    }
    
    @keyframes borderAnimation {
      0% {
        --delimiter: 0%;
      }
      100% {
        --delimiter: 100%;
      }
    }
    <div class="transfer">
      <p>Transfer</p>
      <i class="fas fa-paper-plane"></i>
    </div>

    is this what you want to achieve?

    I didnt use border-image in this. Instead I used a pseudo-element that stays behind your button. I’m also using custom properties with the @property syntax.

    See MDN @property, MDN @property syntax and Can I Use @property? for more info

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search