|
|
488 0
Дизайн модального окна с простой формой
HTML + CSS оформление простого окна с формой на 2 инпута - "Ваше имя" и "Ваш телефон"
Виконуваний код:
<![CDATA[<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>]]>
|
|