😎 » CSS3 » css3 примеры и описание их создания » Дизайн модального окна с простой формой
488 0  

Дизайн модального окна с простой формой

HTML + CSS оформление простого окна с формой на 2 инпута - "Ваше имя" и "Ваш телефон"

Заказать консультацию!
Ваши данные в безопастности

Виконуваний код:

<div class="mfv2"> <i></i> <u>Заказать консультацию!</u> <form action="#"> <input type="hidden" name="formname" value="consult"> <input type="hidden" name="formtitle" value="Получить консультацию"> <div class="input-wrap"> <label for="name-modal-1" class="input-label">Ваше имя</label> <input type="text" id="name-modal-1" name="name" class="input" placeholder="Ваше имя" required=""> </div> <div class="input-wrap"> <label for="tel-modal-1" class="input-label">Ваш телефон</label> <input type="tel" id="tel-modal-1" name="phone" class="input input-num" placeholder="+7-(999)-999-99-99" required=""> </div> <button class="mf_knopka"> <span>ЗАКАЗАТЬ консультацию</span> </button> <a href="#"><s>☉</s> Ваши данные в безопастности</a> </form> </div> <style> .mfv2 {position:relative; width: 28vw; margin-bottom: 10vh;padding: 2.4vw 1.5vw; border-radius: 1rem; border: 1px solid rgba(0, 0, 0, 0.07); text-align: center;} .mfv2 > i {position: absolute; right: 0; top: 0; transform: translate(30%, -30%); width: 2.4vw; height: 2.4vw; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1); background: #ffffff; border-radius: 100%; cursor: pointer; z-index: 19; transition: all 0.3s;} .mfv2 > i:before, .mfv2 > i:after {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; height: 70%; width: 2px; background: #dbdbdb; border-radius: 6px; transition: all 0.3s;} .mfv2 > i:before {transform: translate(-50%, -50%) rotate(45deg);} .mfv2 > i:after {transform: translate(-50%, -50%) rotate(-45deg);} .mfv2 > i:hover {box-shadow: 0 2px 10px rgba(255, 124, 0, 0.5);} .mfv2 > i:hover:before, .mfv2 > i:hover:after {background-color: #ff7c00;} .mfv2 > u {font-size: 1.6vw; font-weight: 700; margin-bottom: 2vh;} .mfv2 form > a {justify-content: center; margin-top: 3vh; align-items: center; color:#999999;} .mfv2 form > a s {font-size:2.2em;float: left;line-height: 0.5;} .mf_knopka { position: relative; width: 100%; min-height: 5vw; padding: 0.8vw; border: none; color: #ffffff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 1rem 2rem rgba(218, 41, 28, 0.4), inset 0 -5px 0 #da291c; border-radius: 6px 6px 8px 8px; background: #ff4500; background-image: linear-gradient(to top, rgba(255, 153, 57, 0) 25%, #ff9939 100%); transition: all 0.3s; z-index: 6;} .btn-blink { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border-radius: 6px 6px 8px 8px; overflow: hidden;} .mf_knopka > span {font-size:1.4em;} .mfv2 label {color:#999999; font-size: 0.85vw; background: #fff; padding:0 6px; position: absolute; left: 1vw; top: -0.5vw; display: inline-block; z-index: 14;} .mfv2 input { height: 3.5vw; border-radius: 5px; border: 1px solid rgba(0, 0, 0, 0.07); width: 100%;overflow: visible;line-height: 1.15; margin: 10px 0; background:#fff; color:#212121; font-size: 0.85vw; padding: 1.2vw; font-weight: 500;} .input-wrap { position: relative; margin-bottom: 3.4vh; width: 100%;} </style>

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023