Effect of increasing and decreasing edge size

Question

Effect of increasing and decreasing edge size

Asked 6 years ago

Viewed 1,526 times

2

I found on a website an example of a field only increasing the edge, follows the GIF below:

I would like to know if I can also increase, decrease the border size of an html element in the call of the same event?
It would be possible to perform this effect (expand/decrease) the px of the edge when loading the screen without there being any linked event in the element, for example, a certain input when loading the screen is expanding and decreasing the border in an endless constant effect.

Didn’t I understand right you that change the thickness of the border while the page is loading? Type in the page you decrease the border? And in the input you want it to have a border-bottom that keeps increasing and decreasing the thickness non-stop as if it were "pulsating"? Got a little confused the things you want to do... You want the btn edge to grow inward?

– hugocsl

2018/10/25 at 15:51

1 answer

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.

by hugocsl • **65,517** points · Answer 1 · 2018-10-25T16:06:45+00:00

I’m not sure I understand what you want, but instead of using border you can use the box-shadow with values such as spread-radius and inset to make these effects. Pro .btn just use a transition along :hover, pro input you need to make a @keyframes alternate to stay pulsing.

OBS: In the .btn I put an "edge" of each color, for you to see that one grows inward inset, and one out:

.btn {
    box-sizing: border-box;
    padding: 1em;
    background-color: black;
    color: #fff;
    font-family: sans-serif;
    font-size: 1rem;
    box-shadow: inset 0 0 0 1px red,
                      0 0 0 1px blue;
    transition: box-shadow 500ms linear;
}
.btn:hover {
    box-shadow: inset 0 0 0 4px red,
                      0 0 0 4px blue;
}

.glow {
    border: 0;
    box-shadow: 0 0 0 0 red;
    animation: glow-box 1s linear infinite alternate;
}
@keyframes glow-box {
    to {
        box-shadow: 0 0 0 5px red;
    }
}

<br>

<a class="btn" href="#">
    <span>Meu BTN</span>
</a>

<br><br><br>

<input class="glow" type="text">

Here’s the full Mozilla documentation on the box-shadow, should interest you: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

This question about multiple edges on an element may interest you: How to have more than one Edge in an Element with CSS