ZorNet.Ru — сайт для вебмастера » HTML и CSS » Анимированная форма для входа на сайт

Анимированная форма для входа на сайт

По виду стандартная форма входа и регистраций на сайте, где используется чистый CSS, также присутствует красивый эффекты при нажатии формы. Сама конструкция выполнена в темном оттенке, также имеет другие палитры цвета для заполнения при входе на сайт. Прежде все изначально все выставлено по стандарту, то только стоит сделать клик, как форма заполнение расширяется, и это все сделано на стилистике css, где не нужно подключать jQuery и разные скрипты.

Но основном все для всех понятно, не чего такого сложного нет. Но разве только самостоятельно добавить ссылку, что забыл пароль и ссылку на регистрацию. Ведь форма только для входа на интернет ресурс предоставлена, на регистрацию, здесь нужно вывести на другую страницу.

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

Приступаем к установке:

HTML

Код

<form class="dacing_mackas_compaveb">
  <h1>Авторизоваться</h1>
  <input type="text" name="" placeholder="Имя пользователя"/>
  <input type="password" name="" placeholder="Пароль"/>
  <input type="submit" name="" value="Авторизоваться"/>
</form>

CSS

Код

.dacing_mackas_compaveb {
  width: 298px;
  padding: 40px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #232121;
  text-align: center;
  border: 2px solid #6d6b6b;
  border-radius: 5px;
  box-shadow: 0px 4px 13px 2px rgba(189, 181, 181, 0.29), 1px 5px 5px 0px rgba(162, 157, 157, 0.39);
}

.dacing_mackas_compaveb h1 {
  color: #f3ecec;
  text-transform: uppercase;
  font-size: 500;
  font-size: 21px;
}

.dacing_mackas_compaveb input[type="text"], .dacing_mackas_compaveb input[type="Password"]{
  border:0;
  background:none;
  background:none;
  display:block;
  margin:18px auto;
  text-align:center;
  border:2px solid #3498db;
  padding:12px 9px;
  width:198px;
  outline:none;
  color:#ececec;
  border-radius:100px;
  transition:0.25s;

}

.dacing_mackas_compaveb input[type="text"]:focus, .dacing_mackas_compaveb input[type="Password"]:focus{
  width:275px;
  border-color:#2ecc71;
}

.dacing_mackas_compaveb input[type="submit"]{
  border:0;
  background:none;
  background:none;
  display:block;
  margin:18px auto;
  text-align:center;
  border:2px solid #36da7b;
  padding:12px 38px;
  outline:none;
  color:#f2f7f4;
  border-radius:100px;
  transition:0.25s;
  cursor:pointer;
}

.dacing_mackas_compaveb input[type="submit"]:hover{
  background: #22cc6a;
}

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

Демонстрация

22 Апреля 2019 Загрузок: 2 Просмотров: 1512 Комментариев: (0)

Поделиться в социальных сетях

СКАЧАТЬ

Материал разместил

Kosten

Комментарии: 0