(Foundation) Граница на кнопке вызывает проблемы с выравниванием

У меня проблемы с стилизацией кнопок двух разных стилей. Первая кнопка должна быть прозрачным фоном с границей 2 пикселя, а следующая кнопка - это просто стиль по умолчанию для кнопок, то есть без рамки. Я думал, что *{box-sizing: border-box;} сделает так, чтобы кнопки выходили одного и того же размера независимо от заполнения / границы / поля. Я подумал, что, возможно, это не сработало, потому что я не указывал ширину / высоту, но даже когда я это делаю, это просто дает эффект нажатия обычной кнопки с выравниванием на 2 пикселя, и даже все же я хочу, чтобы кнопки были естественная ширина согласно тексту внутри них.

Для меня простое решение - просто добавить границу к обычной кнопке с тем же цветом, что и фон, но тогда мне придется также добавить стили для границы для наведения, активного и т.д ... просто кажется, что должно быть быть лучше. Я что-то здесь делаю не так?

Вот пример того, где я нахожусь: http://jsfiddle.net/xa4d4bfv/


html css zurb-foundation border-box
person Westwick    schedule 08.05.2015    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Как насчет добавления границы прозрачного цвета.

a.button { 
  border: 2px solid transparent;
}
person Robin Carlo Catacutan    schedule 08.05.2015
comment
На самом деле мне кажется, что это самое чистое решение. - person Westwick; 09.05.2015
comment
@ Дрю Круто! Рад помочь. - person Robin Carlo Catacutan; 09.05.2015

arrow_upward
0
arrow_downward

класс схемы кнопки должен быть следующим

.button-outline {
    border:2px solid #222;
    color: #222;
    background-color: rgba(0,0,0,0.0);
    padding: 0.9rem 2rem 0.9rem 2rem !important;
}

Ответ Суслова неплохой, у меня ничего, если оставить пуговицу такого же размера

person Addzy    schedule 08.05.2015
comment
Это тоже работает, спасибо. Не уверен, есть ли какие-то предпочтения или один из них более верен, чем другой. - person Westwick; 09.05.2015
comment
Каждый сам по себе, я бы, вероятно, сказал, что нужно идти с ответом Робина, как если бы вы изменили размер кнопок, вам не нужно беспокоиться о переделке отступов. - person Addzy; 09.05.2015