box-sizing: border-box for the button:active

The css3 property box-sizing: border-box does not work for the button when clicked (i.e. the pseudo-state is :active)...

The behavior of is shown: when pressed, a line border: 3px solid red; should appear above the button, but the button should not increase in size... i.e., an inner line of red color should appear, WITHOUT increasing the size of the button by 3px...
Instead! When a line appears above the button, the entire button increases in size by 3px...

I tried it:
1. Google - there is no information why c-vo does not work on the button (everything else plows-blocks, sections, and even links with display: block)!
2. Set the add-on. tipo properties: -webkit-box-sizing:border-box;

Here's the code!

.button{
    transition-property: background-color, color, border;
    transition-duration: 150ms, 100ms, 50ms;

    font: inherit;

    cursor: pointer;

    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;

    font-size: 16px;
    line-height: 18px;
    font-weight: bold;

    border: none;
    border-radius: 4px;
}

.button-red:active{
    color: rgba(255, 255, 255, 0.700);
    background-color: #d7373b;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing: border-box;
    border-top: 3px solid #c13135;
}
Author: CbIPoK2513, 2019-11-03
Source

1 answers

The box-sizing: border-box property, makes it clear to the element that border and padding will go inside the element, reducing its size.

You don't have the size, so it needs to hold the content + add border

.button{
    transition-property: background-color, color, border;
    transition-duration: 150ms, 100ms, 50ms;
    font: inherit;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
}

.button:active{
    color: rgba(255, 255, 255, 0.700);
    background-color: #d7373b;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing: border-box;
    border-top: 3px solid #c13135;
}
<div class="button">Нажми на меня</div>

If we set a static size, we will immediately get what you want.

.button{
    transition-property: background-color, color, border;
    transition-duration: 150ms, 100ms, 50ms;
    font: inherit;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    height: 30px;
}

.button:active{
    color: rgba(255, 255, 255, 0.700);
    background-color: #d7373b;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing: border-box;
    border-top: 3px solid #c13135;
}
<div class="button">Нажми на меня</div>

But, at the same time, the content moves and this is logical.

There is another option.
To achieve the desired result effect, use not border, but box-shadow

.button{
    transition-property: background-color, color, box-shadow;
    transition-duration: 150ms, 100ms, 50ms;
    font: inherit;
    cursor: pointer;
    text-align: center;
    vertical-align: middle;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 18px;
    font-weight: bold;
    border: none;
    border-radius: 4px;
    box-shadow: 0 0 0 0 #c13135 inset;
}

.button:active{
    color: rgba(255, 255, 255, 0.700);
    background-color: #d7373b;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    -o-box-sizing:border-box;
    -ms-box-sizing:border-box;
    box-sizing: border-box;
    box-shadow: 0 3px 0 0 #c13135 inset;
}
<div class="button">Нажми на меня</div>
 0
Author: CbIPoK2513, 2019-11-03 14:58:18