Как стилизовать кнопки для увеличения или уменьшения количества товара?

Question

[proclub]

у нас в проекте учебном вот такие вот штуки есть

Сейчас, я сделала вот так :

codepen

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

Comments

[Сергей delphinpro]

Какой гайд? Если умеете работать с css, то написать стили труда не составит. Если нет - нужно учиться.
Bootstrap вообще не в тему. Проще свои стили запилить в конкретном случае.
Хотя как вариант можно попытаться наколхозить с input-group https://getbootstrap.com/docs/5.1/forms/input-group/

Answer 1

[Владислав Великоиваненко]

Не меняя верстку, в CSS достаточно таких манипуляций:

.button-card-wrapper{
  display: flex;
}

.button-card-wrapper .subtract{
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

.button-card-wrapper .add{
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

.button-card-wrapper .subtract,
.button-card-wrapper .add{
  border: none;
  padding: 15px;
  font-size: 1.8em;
  transition: .2s linear;
}

.js-number{
  width: 3%;
  text-align: center;
  background-color: #EFEFEF;
  border: none;
  font-size: 1.5em;
}

.button-card-wrapper .subtract:hover,
.button-card-wrapper .add:hover{
  cursor: pointer;
  transition: .2s linear;
  background-color: #d3d3d3;
}

Это даст необходимый результат.
Если вопросы более конкретные будут, задавайте:)
Но всё же, раз возник такой вопрос, то полагаю, что отсутствует базовое понимание HTML+CSS. К тому же, по-хорошему, как сказали в комментарии выше, bootstrap вообще тут не сдался, это можно сделать гораздо легче и проще, так зачем жизнь усложнять?) Изучите основы HTML и CSS.

Comments

[proclub]

нам учебный куратор сказала использовать boostrap и то что он решит все наши проблемы

[Владислав Великоиваненко]

proclub, bootstrap*. А вы попробуйте спросить куратора, какие проблемы могут возникнуть без bootstrap?) Не стесняйтесь, раз она так твердо утверждает, что в данной задаче это решит все проблемы, так почему она ни одну проблему не озвучила?)

[proclub]

Владислав Великоиваненко, возможно потому что мы не какой-то там университет и ей все равно )

Извините, можно еще 1 вопрос, у нас есть кнопка и эффект при наведении . Hover который, я его сделала, и добавила padding для самой кнопки и для ховера, но кнопка почему-то прыгает, посмотрела в интернете сказано сделать одинаковые padding ,я так и сделала, но она прыгает, или я не так указала паддинг для hover?

button-padding

[Владислав Великоиваненко]

proclub, у вас в ховере есть border: 2px solid #c3b851; Добавьте его к самой кнопке, помимо :hover и будет счастье)
И для красоты и на ховере, и на кнопке пропишите transition: .2s linear;

[proclub]

Владислав Великоиваненко, получилось!!! Спасибо вам огромное, Владислав !