Как сделать не уродливый дизайн кнопки?

Question

[satorkain]

Изображено две кнопки в двух состояниях, в обычном и в момент наведения курсора мыши. 1-2 моя кнопка, 3-4 эталон. На из. 2, по краям выступают голубые пиксели, выглядит ужасно. Я подозреваю, что это из за бордюра. Если его отключать при наведении курсора, проблема решается, но происходит смещение объектов располагающихся ниже кнопки, на ширину бордюра, — в моём случае на 1px.



Шаблон кнопки с включенным борюром:

.button {
  color: gray;
  text-decoration: none;
  border: 1px solid #e0e0e0;
  border-radius: 25px;
  padding: 5px 15px;
  display: inline-block;
  font-size: 16px;
  font-weight: 100;
}

.button:hover{
  background-color: $masthead-color;
  color:white;
}

Comments

[Rou1997]

"На из. 2, по краям выступают голубые пиксели, выглядит ужасно."
Ну, уж и ужасно. :) Тем более это проявляется только при hover да если действительно пользоваться сайтом, и не сидеть чего-нибудь ждать или просто развлекаться мышью, то вы и не заметили бы такой мелочи, так что вообще-то уж лучше бы потратили свое время на что-то полезное, вместо того чтобы исправлять мелочи.

[satorkain]

Rou1997: Я это вижу, и это главное. Сайт делаю для себя. А мелочь, часто портит общее впечатление. Это тот самый случай. И потом, будет мне тут кнопка какая-то перечить, вообще оборзела.

[Rou1997]

satorkain: "А мелочь, часто портит общее впечатление. "
Ну, конечно, лучше исправить все мелочи, чтобы в результате этого утомиться, и чтобы у вас притупилось мышление, да и попросту потратилось время, и в итоге вы не заметили, как допустили действительно серьезный "косяк", который следует исправить и о котором теперь даже не догадаетесь.

"И потом, будет мне тут кнопка какая-то перечить, вообще оборзела."
К сожалению, вы такой не первый, такой подход чем-то напоминает какого-нибудь Сталина, который тоже не мог успокоиться, пока не расстреляет каждую "мелочь".... и в итоге не успокоился вовсе. :)

[satorkain]

Rou1997: Ну, то что я неправильно подошел к делу, когда надо было сделать скелет, каркас (или как это называется), а потом вытачивать детали, — это мне понятно. Но, эту кнопку надо было сделать по эталону в любом случае, поэтому судьба её предрешена.

Answer 1

[Сергей delphinpro]

Всё гениальное - просто =)

.button:hover{
  background-color: $masthead-color;
  border-color: $masthead-color;
  color:white;
}

Comments

[satorkain]

Больше часа мучаюсь с этим. Спасибо!