bizon365
December 16, 2022

Меняем стандартные кнопки на Bizon365.ru

Изначальный вид кнопки

Добавим css код

<style>
.btndownload:focus {
  outline: none;
  color: #FFF;
  background-color: #f0d298;/*цвет кнопки при нажатии*/
}
.btndownload 
{
  background-color: #f0d298; /*цвет кнопки*/
  color:#fff;/*Цвет текста*/
  padding: 16px 22px;/*внутренние отступы*/
  text-decoration: none;/*Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  display: inline-block;
  font-size: 32px; /* Размер шрифта */
  margin: 4px ;/* Отступ кнопки сверху */
  border-radius: 2px /* радиус скругления углов*/
  
}

/* Эфект при наведения на кнопку*/
.btndownload:hover
{
  background-color: #f0d298!important; /*цвет кнопки*/
  color: #FFF!important;
  tansition: all .3s linear !important;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear; 
}

/*настройки для мобильной версии*/
@media screen and (max-width: 650px)

/*кнопки продажи*/
  .btndownload 
{
   font-size: 22px;/* Размер шрифта */
   margin: 4px ;/* Отступ кнопки сверху */
}

</style>

Получаем такую кнопку.

Если нужно, чтобы 2 кнопки были разных цветов

Добавим следующий код

<style>
.btndownload:focus {
  outline: none;
  color: #FFF;
  background-color: #f0d298;/*цвет кнопки при нажатии*/
}
.btndownload 
{
  background-color: #f0d298; /*цвет кнопки*/
  color:#fff;/*Цвет текста*/
  padding: 16px 22px;/*внутренние отступы*/
  text-decoration: none;/*Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания*/
  display: inline-block;
  font-size: 32px; /* Размер шрифта */
  margin: 4px ;/* Отступ кнопки сверху */
  border-radius: 2px /* радиус скругления углов*/
  
}
.btndownload:nth-child(2) 
{
  background-color: #385da3; /*цвет второй кнопки*/
}

/* Эфект при наведения на кнопку*/
.btndownload:hover
{
  background-color: #f0d298!important; /*цвет кнопки*/
  color: #FFF!important;
  tansition: all .3s linear !important;
  -webkit-transition: all .3s linear;
   -moz-transition: all .3s linear; 
}
/* Эфект при наведения на вторую кнопку*/
.btndownload:nth-child(2):hover
{
 background-color: #385da3!important; /*цвет кнопки*/
  color: #FFF!important;
  tansition: all .3s linear !important;
  -webkit-transition: all .3s linear;
  -moz-transition: all .3s linear; 
}

/*настройки для мобильной версии*/
@media screen and (max-width: 650px)

/*кнопки продажи*/
  .btndownload 
{
  font-size: 22px;/* Размер шрифта */
  margin: 4px ;/* Отступ кнопки сверху */  
}

</style>

Напишите мне и я помогу вам реализовать вашу задачу любой сложности в вашем проекте

TELEGRAM: https://t.me/sergeyget