1

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

a.login {
  position: relative;
  display: inline-block;
  color: #eee;
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
}

div.btn {
  height: auto;
  width: auto;
  position: relative;
  display: inline-block;
  top: 1.25vw;
  background: rgb(251, 87, 88);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgb(251, 87, 88) 0%, rgb(235, 73, 116) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(251, 87, 88) 0%, rgb(235, 73, 116) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(251, 87, 88) 0%, rgb(235, 73, 116) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb5758', endColorstr='#eb4974', GradientType=0);
  /* IE6-9 */
  transition: 0.15s;
  margin-left: -2%;
  left: 15%;
}

p.header {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 2.250em;
  position: relative;
  display: inline-block;
  margin-top: 1vw;
  cursor: default;
}

div.btn:active {
  background: #404040 !important;
  opacity: 1 !important;
  transition: 0s;
}

div.btn:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transition: 0.15s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4 col-xs-12">
  <p class="header">КЛОНДАЙК ТВАРЫНЫ</p>
</div>

<div class="col-md-3 col-xs-12">
  <div class="btn"><a href="#" class="login">ВХОД</a></div>
  <div class="btn"><a href="#" class="login">РЕГИСТРАЦИЯ</a></div>
</div>

1

1 ответ 1

0

Легче всего установить transition только на transform, если он вам нужен только для масштабирования:

div.btn:hover {
    ...
    transition: transform 0.15s;
    ...
}

Градиенты, к сожалению, не поддерживают transition.

a.login {
  position: relative;
  display: inline-block;
  color: #eee;
  font-family: "Roboto", sans-serif;
  font-size: 1.1em;
  font-weight: bold;
  text-decoration: none;
}

div.btn {
  height: auto;
  width: auto;
  position: relative;
  display: inline-block;
  top: 1.25vw;
  background: rgb(251, 87, 88);
  /* Old browsers */
  background: -moz-linear-gradient(top, rgb(251, 87, 88) 0%, rgb(235, 73, 116) 100%);
  /* FF3.6-15 */
  background: -webkit-linear-gradient(top, rgb(251, 87, 88) 0%, rgb(235, 73, 116) 100%);
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, rgb(251, 87, 88) 0%, rgb(235, 73, 116) 100%);
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb5758', endColorstr='#eb4974', GradientType=0);
  /* IE6-9 */
  transition: 0.15s;
  margin-left: -2%;
  left: 15%;
}

p.header {
  font-family: "Roboto", sans-serif;
  font-weight: bold;
  font-size: 2.250em;
  position: relative;
  display: inline-block;
  margin-top: 1vw;
  cursor: default;
}

div.btn:active {
  background: #404040 !important;
  opacity: 1 !important;
  transition: 0s;
}

div.btn:hover {
  -webkit-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -o-transform: scale(1.1);
  transition: transform 0.15s;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-md-4 col-xs-12">
  <p class="header">КЛОНДАЙК ТВАРЫНЫ</p>
</div>

<div class="col-md-3 col-xs-12">
  <div class="btn"><a href="#" class="login">ВХОД</a></div>
  <div class="btn"><a href="#" class="login">РЕГИСТРАЦИЯ</a></div>
</div>

1
  • Да, это я уже понял, по сему пришлось задавать цветом. Спасибо :)
    – user234223
    15 июн 2017 в 6:41

Ваш ответ

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

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