Форма авторизации на CSS / Authorization form CSS3

Для чего нужны кнопки на сайте?

Ответ напрашивается сам собой: “Для того, чтобы их нажимали!”. И, действительно, выделяющаяся симпатичная кнопка привлекает гораздо больше внимания чем тусклая и унылая ссылка. С другой стороны, если вся страница заполнена разномастными кнопками, которые, переливаясь и моргая, требуют внимания пользователя, он, скорее всего, не поняв, что от него требуется, не нажмет ни на одну и просто закроет вкладку.

Поэтому использовать кнопки надо “экономно”, в идеале не больше 1-2 в видимой области экрана. При этом пользователю должно быть максимально понятно, что произойдет, если он нажмет на кнопку. 

Добавление шрифтовых иконок

Добавим иконки в виде шрифтов, переходим на сервис
fontawesome.io и скачиваем их к себе на компьютер. Распакуем архив, копируем папку fonts, в которой находятся шрифты, и копируем файл стилей в директории css. Затем подключаем стили к страничке.

Как сделать кнопку в html?

Итак, как я уже сказал, кнопки можно добавлять при помощи трех тегов <a>, <button> и <input>. Каждый из этих тегов имеет свои особенности и атрибуты и используется для разных целей.

Сделать кнопку-ссылку при помощи тега <a>, по сути, сводится к описанию его стилей в CSS. О стилях поговорим чуть позже.

Как сделать красивую кнопку в html и css?

У каждого из нас свое представление о красоте: кто-то считает красивым закат на берегу моря, а кто-то – Ниссан Жук. О вкусах, как говорится, не спорят.

В моем представлении красивая кнопка – это кнопка, которая обладает следующими качествами:

Является интерактивной (т.е. реагирует на взаимодействие с ней пользователем). Отличительной чертой кнопок, является то, что их можно нажимать, следовательно у кнопки должно быть несколько состояний: дефолтное (состояние “покоя”), нажатое и “ховер” (при наведение курсора)

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

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

Кроме того, тренды в дизайне интерфейсов и технологии их создания постоянно меняются, и за ними нужно успевать.

Если вы хотите узнать как сделать кнопку объемной или с эффектом “стекляшечности”,  как сделать картинку кнопкой и т.д. – почитайте статьи по дизайну интерфейсов за 2005-2009 гг. 🙂

Еще одним пунктом я бы добавил, расположение кнопки в привычных для посетителей местах (например, кнопки входа/регистрации в правом верхнем углу, или кнопка отправки формы под формой). Но это уже больше относится к дизайну всей страницы.

Итак, давайте для начала сделаем две обычные кнопки, одна из которых должна открывать модальное окно (кнопка-действие – <button>) с формой для входа, а вторая – вести на страницу регистрации (кнопка-ссылка – <a>). При этом обе кнопки будут выполнены в одной стилистике.

Какие бывают кнопки?

В моем представлении кнопки бываю двух типов, для каждого из них я использую соответствующие HTML-теги:

Кнопки-ссылки нужны для привлечения внимания к ссылке. Побуждают пользователя перейти на какую-либо страницу, например, страницу регистрации. Для них я использую тег <a>. 

Кнопки-действия нужны для совершения какого-либо действия на странице (отправка формы, открытие модального окна и т.д.). Для этого можно использовать теги <input> или <button>. Я предпочитаю второй вариант, т.к. он гораздо более гибкий в настройке.

Хотя оба этих типа могут выглядеть одинаково (при помощи CSS), принципиальное их отличие в том, что важнейшим атрибутом тега <a> является href (цель ссылки), без которого этот тег даже не воспринимается браузером как ссылка и курсор при наведении на него не меняется на pointer. Это поведение, конечно, можно изменить при помощи “костылей”

a {
  cursor: pointer;
}

или

Каркас формы в html

Первым создаем каркас формы. Открываем заготовку html и пропишем следующий код между тегами.

Красивая анимированная кнопка наверх для сайта

HTML

Описываем в css элементы формы

Затем оформим данные элементы формы. Создадим дополнительную директорию CSS в которой будем размещать файлы стилей. В ней создаем файл style.css и подключаем его к нашей страничке.

Создаем анимацию

Первое, что мы сделаем, мы спрячем вторую форму, назначив opacity на 0:

#register{
    z-index: 21;
    opacity: 0;
}

Помните, что форма входа имеет параметр z-index: 22? Второй форме мы назначим этот параметр на 21, чтобы поставить его “под” форму входа.

Теперь самое интересное: меняем формы местами, используя псевдо класс :target. Вам нужно понять одну вещь по поводу :target: для перемещения мы будем использовать якоря. Нормальное поведение якоря — прыжок на определенный элемент страницы. Но мы не хотим этого, мы лишь хотим поменять формы местами.

И тут приходит на помощь наш трюк с использованием двух ссылок в начале страницы. Вместо того, чтобы направить нас прямо на вторую форму, рискуя испытать эффект “прыжка”, мы придадим ссылкам параметр display: none. Это поможет избежать прыжков. Я обнаружил этот трюк на сайте: CSS3 create (французский язык).

#toregister:target ~ #wrapper #register,
#tologin:target ~ #wrapper #login{
    z-index: 22;
    animation-name: fadeInLeft;
    animation-delay: .1s;
}

Вот, что происходит: когда мы кликаем на кнопку Присоединиться, мы направляемся на #toregister. Затем происходит анимация и лишь потом переходим на элемент #register. Мы используем анимацию под названием fadeInLeft. Так как мы “прячем” форму, используя нулевую прозрачность, мы применим анимацию, которая будем постепенно появляться.

Мы также изменили z-index, чтобы она появилась поверх другой формы. То же самое происходит для другой формы same happens for the other form.Вот код для анимации. Мы использовали CSS3 animation framework от Dan Eden и адаптировали этот фреймворк под наш туториал.

Стилизуем формы, используя css3

Во-первых, давайте назначим нашим формам базовый стиль.

#subscribe,
#login{
    position: absolute;
    top: 0px;
    width: 88%;
    padding: 18px 6% 60px 6%;
    margin: 0 0 35px 0;
    background: rgb(247, 247, 247);
    border: 1px solid rgba(147, 184, 189,0.8);
    box-shadow:
        0pt 2px 5px rgba(105, 108, 109,  0.7),
        0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
    border-radius: 5px;
}
#login{
    z-index: 22;
}

Мы добавили две тени к элементу: одна — с целью создать внутреннее голубое свечение, а вторая — внешняя тень. Чуть позже я объясню вам z-index.

Здесь мы назначим свойства для шапки:

Форма авторизации на простом html с пояснениями

<div class="form_auth_block">
  <div class="form_auth_block_content">
    <p class="form_auth_block_head_text">Авторизация</p>
    <form class="form_auth_style" action="#" method="post">
      <label>Введите Ваш имейл</label>
      <input type="email" name="auth_email" placeholder="Введите Ваш имейл" required >
      <label>Введите Ваш пароль</label>
      <input type="password" name="auth_pass" placeholder="Введите пароль" required >
      <button class="form_auth_button" type="submit" name="form_auth_submit">Войти</button>
    </form>
  </div>
</div>

.form_auth_block{
    width: 500px;
    height: 500px;
    margin: 0 auto;
    background: url(http://www.dailycompass.org/wp-content/uploads/2022/01/Bubbles.jpg);
    background-size: cover;
    border-radius: 4px;
}
.form_auth_block_content{
  padding-top: 15%;
}
.form_auth_block_head_text{
    display: block;
    text-align: center;
    padding: 10px;
    font-size: 20px;
    font-weight: 600;
    background: #ffffff;
    opacity: 0.7;
}
.form_auth_block label{
    display: block;
    text-align: center;
    padding: 10px;
    background: #ffffff;
    opacity: 0.7;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 10px;
}
.form_auth_block input{
  display: block;
  margin: 0 auto;
  width: 80%;
  height: 45px;
  border-radius: 10px;  
  border:none;
  outline: none;
}
input:focus {
  color: #000000;
  border-radius: 10px;
  border: 2px solid #436fea;
}
.form_auth_button{
    display: block;
    width: 80%;
    margin: 0 auto;
    margin-top: 10px;
    border-radius: 10px;
    height: 35px;
    border: none;
    cursor: pointer;
}
::-webkit-input-placeholder {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
::-moz-placeholder          {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
:-moz-placeholder           {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder
:-ms-input-placeholder      {color:#3f3f44; padding-left: 10px;} // Это стили для placeholder