0
Я столкнулся с некоторыми CSS для стилизованных кнопок, которые я использую для отличного эффекта. Однако код, который я создал, создает кнопку расширения ширины в соответствии с текстом кнопки.Кнопки в стиле CSS
Я хочу поместить две кнопки друг на друга и иметь их точно такую же ширину, независимо от текста кнопки.
Может ли кто-нибудь сказать мне, как я могу настроить существующий CSS, чтобы это можно было сделать?
/*-- MY CSS READ MORE BUTTON --*/
a.btn,
.btn,
.btn:focus,
input[type="submit"],
a.more-link {
padding: 13px 30px;
line-height: 1;
color: #000000;
border: 1px solid #d9d9d9;
border-radius: 3px;
text-align: left;
text-shadow: none;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
background: #ffffff;
filter: none;
box-shadow: none;
text-align: center;
font-size: 10px;
text-transform: uppercase;
letter-spacing: 2px;
}
a,
a.btn,
.btn,
.btn:focus,
input[type="submit"],
.btn:hover,
input[type="submit"]:hover,
{
-webkit-transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease;
transition: color 0.2s ease, background 0.6s ease, border-color 0.2s ease;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 4px;
}
/*-- EDIT HERE FOR COLOUR CHANGE ON HOVER --*/
.btn:hover,
input[type="submit"]:hover,
a.more-link:hover {
background: #7acfd6;
border-color: #cccccc;
color: #fff;
}
/*-- EDIT HERE FOR ACTIVE BUTTON COLOUR --*/
.btn:active,
.btn-primary,
.btn-primary:focus {
color: #ffffff;
background: #000000;
box-shadow: none;
}
.btn-primary:hover,
.btn-primary:active {
background: #000000;
}
.btn.alt {
background: #9BA78A;
border-color: #9BA78A;
color: #ffffff;
}
.btn.alt:hover {
background: #000000;
color: #ffffff;
border-color: #000000;
}<p style="text-align: center;"><a class="btn" href="#">Learn more</a>
</p>
Ожидается, что вы, по крайней мере, попытаетесь запрограммировать это для себя. Stack Overflow не является службой записи кода. Я бы предположил, что вы делаете некоторые [** дополнительные исследования **] (http://meta.stackoverflow.com/questions/261592/how-much-research-effort-is-expected-of-stack-overflow-users) , либо через Google, либо путем поиска SO, сделайте попытку и. если у вас все еще есть проблемы, вернитесь ** с кодом ** и объясните, что вы пробовали. –
Добавьте ширину к элементу. – Aibrean
Вам нужно как минимум сказать нам, что вы пробовали? Если вы не хотите, чтобы кнопка расширялась, то почему бы не дать ** 'max-width' /' width' кнопкам **? –