0

И так, я хочу создать кнопку входа на сайт У нее есть текст внутри и справа стрелочка вниз Вот код на на данный момент:

<a href="#" class="login f_left">Sign in</a>

scss:

.login {
          display: block;
          color: $login_blue;
          font: $main_font;
          font-weight: bold;
          padding: 11px 24px;
          background: $login_light_blue url("../img/polygon.png") no-repeat scroll 76px 20px;
          line-height: 19px;
          @include transition(0.2s background);
          &:hover {
            background: $yellow url("../img/polygon.png") no-repeat scroll 76px 20px;
          }
        }

Эта стрелочка висит бэкграундом Как видите, ширины фиксированной нет и форму я задал падингом Но при таком раскладе в хроме выглядит кнопка сплющенной и стрелочка залазит на надпись В мозиле выглядит хорошо

Вопрос: Правильно ли я верстаю кнопку?Может, нужно не падингом, а шириной и высотой или еще как то

Спасибо

4
  • а почему не использовать кнопку вместо ссылки?
    – Grundy
    27 апр 2016 в 10:00
  • А то, что на картинке, мы должны угадать?
    – Qwertiy
    27 апр 2016 в 10:40
  • @Qwertiy прочитай внимательно вопрос и поймешь 27 апр 2016 в 12:25
  • @Grundy ну, так решил 27 апр 2016 в 12:26

2 ответа 2

2

Чтобы не возникало наложений, поместите картинку рядом с надписью и управляйте её положением через стили. Отступ от надписи можно задать через паддинг, вертикальное положение - через относительное позиционирование и смещение. Например:

.login {
  display: block;
  color: blue;
  font-weight: bold;
  padding: 11px 24px;
  background: lightblue;
  line-height: 19px;
  transition: 0.2s background;
}
.login:hover {
  background: yellow;
}
.login-img {
  display: inline-block;
  padding-left: 12px;
  position: relative;
  bottom: -3px;
}
<a href="#" class="login f_left"><span class="login-text">Sign in</span><img src="http://www.icomos.org/modules/mod_dmt_social/icons/linkedin_16.png" class="login-img"></a>

2
  • Я пробовал. Решение нашел такое: я убрал все паддинги, картинку сделал absolute, а текст text-align и line-height 27 апр 2016 в 9:55
  • @НикитаЩипилов Можете итоговый код.показать? 27 апр 2016 в 10:07
0

Используй псевдоэлемент ::after для отображения стрелочки.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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