Effect of increasing and decreasing border size

Navigation
3

I found on a site an example of a just field increasing the border, follow the GIF below:

  • I would like to know if I can in addition to increase, decrease the border size of an html element in the call of the same event?
  • It would be possible to achieve this effect (expand / collapse) the px of the border by loading the screen without there being any events linked in the element, for example, a certain input when loading the screen is expanding and decreasing the border in an endless constant effect.
    • asked by anonymous 25.10.2018 / 17:32

    1 answer

    6

    I do not know if I understand what you want, but instead of using border you can use box-shadow with values like spread-radius and inset to make these effects. Pro .btn just use a transition with :hover , already pro input you need to make a @keyframes alternate to keep clicking.

    OBS: In .btn put a "border" of each color, to see that one grows in inset , and another 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 is the complete Mozilla documentation on box-shadow , which should interest you: link

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

        
    25.10.2018 / 18:06
    RadioButtons tabStop independent of Checked property Count with null value return zero