Ладья ie Веб-дизайнер здесь. Я пытаюсь сделать адаптивную веб-страницу и у меня проблемы с кнопками. Я сделал так, чтобы при наведении на кнопку текст менялся, но проблема в том, что когда текст меняется, все кнопки пытаются изменить положение, чтобы аккомодировать это изменение, чтобы некоторые кнопки подходили при наведении курсора на некоторые кнопки.
Я спрашиваю, есть ли способ сделать кнопки организованными в сетку, чтобы при наведении курсора на кнопку все остальные кнопки оставались на месте, независимо от того, как долго текст на кнопке изменяется и размер области просмотра. Заранее спасибо.
Кодовый код здесь
HTML
<div class="row">
<h2 class="titulo">Consonantes</h2>
<button class="button button21"><span>p</span></button>
<button class="button button22"><span>t</span></button>
<button class="button button23"><span>k</span></button>
<button class="button button24"><span>b</span></button>
<button class="button button25"><span>d</span></button>
<button class="button button26"><span>g</span></button>
<button class="button button27"><span>f</span></button>
<button class="button button28"><span>v</span></button>
<button class="button button29"><span>s</span></button>
<button class="button button30"><span>ʃ</span></button>
<button class="button button31"><span>z</span></button>
<button class="button button32"><span>θ</span></button>
<button class="button button33"><span>ð</span></button>
<button class="button button34"><span>tʃ</span></button>
<button class="button button35"><span>dʒ</span></button>
<button class="button button36"><span>ʒ</span></button>
<button class="button button37"><span>l</span></button>
<button class="button button38"><span>m</span></button>
<button class="button button39"><span>n</span></button>
<button class="button button40"><span>ŋ</span></button>
<button class="button button41"><span>r</span></button>
<button class="button button42"><span>h</span></button>
<button class="button button43"><span>j</span></button>
<button class="button button44"><span>w</span></button>
</div>
CSS
.button {
background-color: #0004CD;
border: none;
color: white;
padding: 32px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 32px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
}
.button {
background-color: #0004CD;
color: white;
border: 2px solid #008CBA;
}
.button:hover {
background-color: white;
color: black;
font-size: 20px;
}
.titulo {
font-weight: bolder;
color: #0004CD;
}
button:hover span {display:none}
.button21:hover:before {content:"parrot"}
.button22:hover:before {content:"better"}
.button23:hover:before {content:"key"}
.button24:hover:before {content:"ball"}
.button25:hover:before {content:"dog"}
.button26:hover:before {content:"leg"}
.button27:hover:before {content:"off"}
.button28:hover:before {content:"voice"}
.button29:hover:before {content:"snake"}
.button30:hover:before {content:"she"}
.button31:hover:before {content:"reason"}
.button32:hover:before {content:"path"}
.button33:hover:before {content:"that"}
.button34:hover:before {content:"match"}
.button35:hover:before {content:"bridge"}
.button36:hover:before {content:"garage"}
.button37:hover:before {content:"bell"}
.button38:hover:before {content:"jam"}
.button39:hover:before {content:"know"}
.button40:hover:before {content:"sing"}
.button41:hover:before {content:"married"}
.button42:hover:before {content:"who"}
.button43:hover:before {content:"yellow"}
.button44:hover:before {content:"why"}