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>
2
Answers
This was the code which I ran on my pc and everything worked absolutely fine
Now, still if you have any issues then do mail me on [email protected] so that I can assist you further
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