2

Я хочу написать CSS, который будет делать и button и a кнопками, похожими на material-дизайн. Написал стили, но если применить стили к элементу a, то он становится ниже button на один пиксель. Почему?

.material-button {
    display: inline-block;
    background-color: #507299;
    border: none;
    border-radius: 2px;
    
    padding-left: 16px;
    padding-right: 16px;

    height: 36px;
    line-height: 36px;
    white-space: nowrap;

    font-family: RobotoMedium;
    font-size: 14px;
    /*text-align: center;*/
    text-transform: uppercase;
    color: #ffffff;
}

.material-button:hover,
.material-button:visited,
.material-button:link,
.material-button:active {
    color: #ffffff;
    text-decoration: none;
}
<a role="button" class="material-button" >
  Запись
</a>

<button type="button" class="material-button" >
  Копировать
</button>

1
  • добавьте vertical-align: top;
    – soledar10
    3 ноя 2016 в 17:04

1 ответ 1

3
  1. Ещё верхний и нижний паддинг обнулите.

  2. Для файерфокса рекомендуют обнулить паддинг и границу через ::-moz-focus-inner. В трюках советуют добавить !important и заключить инструкцию в @-moz-document url-prefix(http://) { }.

/* 2. */
.material-button::-moz-focus-inner {
  border: 0;
  padding: 0 16px;
}        

.material-button {
    display: inline-block;
    background-color: #507299;
    border: none;
    border-radius: 2px;
    
    /* 1. */
    padding: 0 16px;

    height: 36px;
    line-height: 36px;
    white-space: nowrap;

    font-family: RobotoMedium;
    font-size: 14px;
    /*text-align: center;*/
    text-transform: uppercase;
    color: #ffffff;
}

.material-button:hover,
.material-button:visited,
.material-button:link,
.material-button:active {
    color: #ffffff;
    text-decoration: none;
}
<a role="button" class="material-button" >
  Запись
</a>

<button type="button" class="material-button" >
  Копировать
</button>

10
  • Спасибо, это решение проблемы =) 3 ноя 2016 в 17:01
  • @ИльяБизунов, отметьте ответ как правильный
    – ArchDemon
    3 ноя 2016 в 17:09
  • @ArchDemon так я и отметил, как только это стало возможно. Его же нельзя какое-то время после публикации вопроса принять. 3 ноя 2016 в 17:15
  • @ИльяБизунов, что в вашем вопросе, что в этом ответе кнопка Запись ниже кнопки Копировать. FF 47
    – Visman
    3 ноя 2016 в 17:25
  • @Visman, очень странно. Открыл вопрос в FF - тоже на 1 пиксель ниже. Открыл эти же кнопочки в своем проекте - все нормально. Почему так получается - понятия не имею 3 ноя 2016 в 17:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.