Shape with shadow / Формы / Сниппеты Bootstrap

Версия: v1.0.1

Категория: Формы

Bootstrap: 3, 4, 5

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify, Vue, React, Laravel, Angular, WHMCS

Язык: Английский

Вес файла: 1.0 Kb

Уникальный ID: 4913

Количество символов:

Посмотрели: 3772 раз

Помощь: установка & настройка

Прикреплён файл №2: /stuff/0-0-0-4913-20

Скачали бесплатно: 139 раз

Прокомментировали: 0 раз

Рейтинг: 3.0 / 5 - 28 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: shape with shadow, сниппет, Snippet, Form, форма входа, формы, Bootstrap

Поделился: BootstrapТема

Добавлено: 2021-11-15 в 20:49

Метка: 1638268110

⇄ ⇅

.form-container .form-icon{
 color: #ac40ab;
 font-size: 55px;
 text-align: center;
 line-height: 100px;
 width: 100px;
 height:100px;
 margin: 0 auto 15px;
 border-radius: 50px;
 box-shadow: 7px 7px 10px #cbced1, -7px -7px 10px #fff;
}

.form-container .title{
 color: #ac40ab;
 font-size: 25px;
 font-weight: 700;
 text-transform: uppercase;
 letter-spacing: 1px;
 text-align: center;
 margin: 0 0 20px;
}

.form-container .form-horizontal .form-group{ margin: 0 0 25px 0; }

.form-container .form-horizontal .form-group label{
 font-size: 15px;
 font-weight: 600;
 text-transform: uppercase;
}

.form-container .form-horizontal .form-control{
 color: #333;
 background: #ecf0f3;
 font-size: 15px;
 height: 50px;
 padding: 20px;
 letter-spacing: 1px;
 border: none;
 border-radius: 50px;
 box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;
 display: inline-block;
 transition: all 0.3s ease 0s;
}

.form-container .form-horizontal .form-control:focus{
 box-shadow: inset 6px 6px 6px #cbced1, inset -6px -6px 6px #fff;
 outline: none;
}

.form-container .form-horizontal .form-control::placeholder{
 color: #808080;
 font-size: 14px;
}

.form-container .form-horizontal .btn{
 color: #000;
 background-color: #ac40ab;
 font-size: 15px;
 font-weight: bold;
 text-transform: uppercase;
 width: 100%;
 padding: 12px 15px 11px;
 border-radius: 20px;
 box-shadow: 6px 6px 6px #cbced1, -6px -6px 6px #fff;
 border: none;
 transition: all 0.5s ease 0s;
}

.form-container .form-horizontal .btn:hover,
.form-container .form-horizontal .btn:focus{
 color: #fff;
 letter-spacing: 3px;
 box-shadow: none;
 outline: none;
}
</style>

<div class="col-md-4 offset-md-4">
 <div class="form-container">
 <div class="form-icon"><i class="fa fa-user"></i></div>
 <h3 class="title">Login</h3>
 <form class="form-horizontal">
 <div class="form-group">
 <label>email</label>
 <input class="form-control" type="email" placeholder="email address">
 </div>
 <div class="form-group">
 <label>password</label>
 <input class="form-control" type="password" placeholder="password">
 </div>
 <button type="button" class="btn btn-default">Login</button>
 </form>
 </div>
 </div>

</div>

BootstrapTema

Shape with shadow

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0