1

Мышка входит -> выходит из кнопки (видимости кнопки)

введите сюда описание изображениявведите сюда описание изображения

Кто может дать код с подробным объяснением, что конкретный код делает. Просто у меня вид изначальный передать получилось, но с анимацией проблемы... Вот что у меня:

.button_login {
  position: absolute;
  text-decoration: none;
  border: orange solid 1.7px;
  margin-top: 20px;
  padding: 8px;
  font-size: 26px;
  font-family: monospace;
  color: #000;
}
<form>
  <div>
    <a href="#" class="button_login">Login</a>
  </div>
</form>

4 ответа 4

5

Ну зачем столько лишнего кода?

.button_login {
  position: absolute;
  text-decoration: none;
  border: orange solid 1.7px;
  margin-top: 20px;
  padding: 8px;
  font-size: 26px;
  font-family: monospace;
  color: #000;
}

.button_login {
  background-image: linear-gradient(transparent 10%, orange 10%);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  transition: .2s;
}

.button_login:hover {
  background-position: 0 180%;
}
<form>
  <div>
    <a href="#" class="button_login">Login</a>
  </div>
</form>

После комментария о состояниях кнопок (Автор вопроса хотел, что бы заливка с пустого фона заполнялась на фулл) - скорректируем решение:

.button_login {
  position: absolute;
  text-decoration: none;
  border: orange solid 1.7px;
  margin-top: 20px;
  padding: 8px;
  font-size: 26px;
  font-family: monospace;
  color: #000;
}

.button_login {
  background-image: linear-gradient(transparent 50%, orange 50%);
  background-size: 200% 200%;
  background-repeat: no-repeat;
  transition: .2s;
}

.button_login:hover {
  background-position: 0 100%;
}
<form>
  <div>
    <a href="#" class="button_login">Login</a>
  </div>
</form>

3
  • а как можно наоборот запустить?
    – aquaprogit
    6 окт 2018 в 7:49
  • @0xdb я просто показал в вопросе не изначальное состояние кнопки а в процессе анимации. Я хотел что бы заливка с пустого фона заполнялась на фулл. А в ответе там маленький белый кусок оставался.
    – aquaprogit
    6 окт 2018 в 8:37
  • @SeeSharp, можно и наоборот. background-position: 0 200%; добавьте для состояния по умолчанию. 6 окт 2018 в 11:26
2
.button_login:hover {background: orange;}
.button_login::after {content:'';position:absolute;left:0;right:0;top:0;height:5px;background:#fff;}

Будет заливаться оранжевым по наведению, сверху будет оставаться небольшая белая часть. При желании можете добавить переход для анимации.

2
  • Я такой скрин сделал там секундная анимация, заливаеться полностью снизу вверх. А при выходе мыши обратно анимация
    – aquaprogit
    5 окт 2018 в 20:07
  • Типо квадрат идёт вверх пока не выйдет ховер он выше не пойдёт
    – aquaprogit
    5 окт 2018 в 20:09
1

У меня получилось как-то так.

.button_login {
  display: block;
  position: relative;
  margin: 40px auto;
  font-family: monospace;
  font-size: 24px;
  font-weight: bold;
  text-transform: uppercase;
  color: #333;
  border: 3px solid #f7ca18;
  line-height: 1;
  padding: 12px 32px;
  background-color: transparent;
}
.button_login:before {
  content: "";
  position: absolute;
  width: 100%;
  height: calc(100% - 10px);
  background-color: #f7ca18;
  left: 0;
  bottom: 0;
  z-index: -1;
  transform-origin: center bottom;
  transition: .2s ease-out;
}
.button_login:after {
  content: "";
  position: absolute;
  width: 100%;
  height: 0;
  background-color: #f7ca18;
  left: 0;
  top: 0;
  z-index: -1;
  transform-origin: center top;
  transition: .15s ease-in;
    transition-delay: .2s;
}
.button_login:hover:before {
  height: 0;
}
.button_login:hover:after {
  height: 10px;
}
<button class="button_login">Sign Up</button>

1

Моя версия ...

Работает и на hover и на click при focus

* {
  margin: 0;
  /*обнуляем отсупы*/
  padding: 0;
  /*обнуляем отсупы*/
}

.sign {
  padding: 8px 20px;
  color: blue;
  position: relative;
  /*делаем родителем*/
  overflow: hidden;
  /*скрываем всё что выходит*/
  cursor: pointer;
  /*меняем на курсор как при наведении*/
  margin: 10px;
  /*внешний отступ*/
  font-size: 26px;
  /*размер шрифта*/
  border: none;
  /*убираем border*/
  outline: none;
  /*убираем outline*/
}

.sign:after {
  /*здесь параметры псевдо элемента*/
  content: "";
  display: block;
  width: 100%;
  height: 0;
  position: absolute;
  top: 0;
  /*расположение блока в абсолютных величинах от relative*/
  left: 0;
  /*расположение блока в абсолютных величинах от relative*/
  background: #000;
  transition: 0.5s;
  /*время анимации*/
}

.sign span {
  position: relative;
  z-index: 10;
}

.sign:focus:after,
.sign:hover:after {
  content: "";
  background: tomato;
  /*фон будет томатный*/
  top: -5px;
  /*сдвигаем блок по нажатию и по наведению в верх*/
  height: calc(100% + 5px);
  /*математическая функция прибаления высоты + 5px*/
}

.sign:focus span,
.sign:hover span {
  color: #fbfbfb;
  /*меняем цвет текста при фокусе и при наведении*/
}
<button class="sign">
  <span>sign in</span>
</button>

2
  • Воу, всё отлично. Пару моментов. Можете в коде css указать где и что делает. И можно что бы при выходе из области кнопки заливка уходила снизу вверх а не наоборот
    – aquaprogit
    6 окт 2018 в 6:52
  • @SeeSharp изменил ответ - дополнил комментариями 6 окт 2018 в 9:20

Ваш ответ

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

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