Zmiana rozmiaru buttona po najechaniu na niego

Question

Witam, 
Mam problem z przyciskiem w formularzu, który zmienia swój rozmiar po najechaniu na niego(.form__submit:hover). Domyślam się, że jest to spowodowane nadanym borderem, ale nie rozumiem dlaczego skoro w stylach określiłam box-sizing:border-box.
Na razie nadałam .form__submit taki sam border tylko o kolorze białym, tak żeby nie był widoczny ten przeskok. Wiem, że to pewnie nie jest dobre rozwiązanie, dlatego proszę o pomoc jeśli ktoś wie na czym polega mój błąd. 
Poniżej wklejam kod html i css mojego formularza.

Z góry dziękuję wszystkim za pomoc ;)

 <form action="#" method="post" class="form">               
                        <label for="name" class="visuallyhidden">name</label>
                            <input id="name" class="form__input" type="text" name="name" placeholder="name" required>
                        
                        <label for="email" class="visuallyhidden">email</label>
                            <input id="email" class="form__input" type="email" name="email" placeholder="email" required>
                        
                        <label for="topic" class="visuallyhidden">topic</label>
                            <textarea id="topic" class="form__textarea" name="topic" cols="30" rows="1" minlength="50" maxlength="150" placeholder="topic" require></textarea>                  
                        
                        <button class="form__submit" type="submit" name="submit">send</button>         
                    </form>

*{
    box-sizing: border-box;
}
.form__input, .form__textarea, .form__submit{
    margin-bottom: 10%;
    width: 100%;
    font-family: 'Karla', sans-serif;
    font-size: 0.9rem;        
}
.form__submit{
    padding:2% 0;
    text-transform: uppercase;
    background-color: #e2e2e2;
    border: 0.125em solid #fff;
    color:#505050;    
    cursor: pointer; 
    transition: all 1s;             
}
.form__submit:hover{
    border: 0.125em solid #dddddd;
    background-color: #fff;    
}

 

Answer 1

Na codepenie wszystko działa prawidłowo. Button ma taką samą wysokość i szerokość po najechaniu myszką. Chyba, że nie rozumiem o co Ci chodzi

https://codepen.io/anon/pen/MzrEXQ

Comments

Ten button może sprawiać wrażenie powiększenia, bo po najechaniu myszką jego border, który jest koloru białego zamienia się na szary.

---

@Grzegorz :>,
No właśnie zastanawiam się dlaczego gdy nadam

.form__submit{
border:0;
}

.form__submit:hover{
    border: 0.125em solid #dddddd;   
}

dlaczego wysokość buttona się zmienia mimo box-sizing:border-box;

---

A, teraz widzę o co Ci chodzi. Musisz temu buttonowi nadać height jakiś. Wtedy box-sizing trzyma się tej wysokości :>

---

Faktycznie działa jeśli nadam height np. w rem albo vh. Jeśli podam wartość w procentach to problem nadal pozostaje.

.form__submit{
    padding:2% 0;
    text-transform: uppercase;
    background-color: #e2e2e2;
    border: 0;
    color:#505050;    
    cursor: pointer; 
    transition: all 1s;    
    height:15%;
}

 

---

Wysokość w procentach podaje się do określenia wysokości względem bloku, w którym dany element się znajduje. Jeśli chcesz podać wartości w procentach, możesz dodać pozycjonowanie absolutne dla buttona (wtedy wysokość będziesz określać względem okna przeglądarki) lub wstawić go do jakiegoś diva, któremu nadasz odpowiednią wysokość.

Opcja z divem:
https://codepen.io/anon/pen/MzrEXQ

Opcja z position:absolute:
https://codepen.io/anon/pen/dQdWpq

---

Ok rozumiem. Dzięki za pomoc