CSS Bottom border weird bug - Html

Nemmem
April 15, 2023
294 views
1 vote
2 Answers

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:

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>

Tags: css html

Answers

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

.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

Please signup or login to give your own answer.

Click here to cancel reply.

CSS Bottom border weird bug – Html

Answers