ZorNet.Ru — сайт для вебмастера » HTML и CSS » Форма выбора отправки сообщений на сайте

Форма выбора отправки сообщений на сайте

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

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

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

Концепция кнопки отправить сообщение

1. При открытии страницы или сайта, эта кнопка по умолчанию.

2. После клика по кнопке, то сразу следует раскрытие информации для выбора отправки сообщение.

Круглая кнопка для открытие почтового окна

Установка:

Подключаем шрифтовые кнопки:

Код

HTML

Код

<body>
  <div class="kechnologicag">
  <div class="vesongs-dconten" id="msg">
  <div class="cesusineon cesusineon1">
  <i class="material-icons">camera_alt</i> <i class="mss">КАМЕРА</i>
  </div>
  <div class="cesusineon cesusineon2">
  <i class="material-icons">filter_none</i> <i class="mss">ФАЙЛЫ</i>
  </div>
  <div class="cesusineon cesusineon3">
  <i class="material-icons">mic</i> <i class="mss">МИКРОФОН</i>
  </div>
  <div class="cesusineon cesusineon4">
  <i class="material-icons">chat_bubble_outline</i>
  <i class="mss">EMAIL-АДРЕС</i>
  </div>
  </div>
  <div class="veonegies" id="btn">
  <div class="posketion-kechnologicag">
  <span class="one btn" id="plus">+</span>
  <span class="two btn" id="kaseokanmsg"
  ><i class="material-icons">send</i></span
  >
  </div>
  <div class="bationokang"></div>
  </div>
  </div>
  </body>

CSS

Код

body {
  background: rgb(250, 245,204);
  display: flex;
  justify-content: center;
  align-cesusineon: center;
  height: 100vh;
}
.cesusineon{
  cursor:pointer;
}
* {
  padding: 0;
  margin: 0;
}

.vesongs-dconten {
  border-radius: 50%;
  background: white;
  overflow: hidden;
  height: 20px;
  width: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 0.7s ease-in-out;
  transform: translate(-50%, -50%);
  will-change: contents;
  display: grid;
  grid-gap: 15px;
  color: rgb(75, 72, 72);
  box-sizing: border-box;
  padding: 10px;
}

i {
  transform: translateY(4px);
}

.kechnologicag {
  width: 1450px;
  height: 450px;
  position: relative;
  box-shadow: 1px 4px 7px #292626;
  background: linear-gradient(to bottom right, #a7069e, #4daedc);
}

.veonegies {
  border-radius: 50%;
  background: white;
cursor:pointer;
  height: 50px;
  width: 50px;
  position: absolute;
  top: 50%;
  transition: all 0.5s cubic-bezier(0.63, 0.18, 0.83, 0.67);
  z-index: 3;
  left: 50%;
  font-size: 25px;
  font-weight: bolder;
  color: rgb(51, 48, 48);
  transform: translate(-50%, -50%);
  box-shadow: 4px 3px 4px rgba(48, 47, 47, 0.459);
}
.cesusineon:hover {
  color: black;
}
.posketion-kechnologicag {
  width: 100%;
  height: 100%;
  position: relative;
}

span {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transition: all 1s;
}
i {
  font-weight: normal;
  font-style: normal;
}
.one {
  top: 100%;
  left: -130%;
  transition: top 0.5s, left 0.5s, transform 0.7s linear 0.1s;
  font-weight: bolder;
  font-size: 40px;
  transform: translate(-50%, -50%) rotate(0deg) scale(0);
  transform-origin: center;
}
.seoate-gieskan {
  top: 50%;
  transition: top 1s, left 1s, transform 0.4s ease 0.5s;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg) scale(1);
}
.two {
  transform: translate(-50%, -50%) rotate(-45deg);
  transform-origin: center;
  transition: all 0.8s ease;
}

.kaseokan {
  top: 30%;
  left: 130%;
}
.dexaesig {
  left: 50%;
  transform: translate(-50%, -50%);
  top: 83%;
}
.resize {
  width: 275px;
  height: 205px;
  border-radius: 10px;
  box-shadow: 5px 2px 10px black;
}
i.mss {
  border-bottom: 1px solid gainsboro;
  margin-left: 5px;
  font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
  color: rgb(122, 119, 119);
  transform: translateY(15px);
  display: inline-block;
  opacity: 0;
  transition: all 0.5s ease-in-out 0.4s;
}
i.mss-show {
  opacity: 1;
  transform: translateY(0px);
}
.cesusineon {
  opacity: 0;
  transition: opacity 0.3s;
}
.skptimization {
  opacity: 1;
}
.posketion-kechnologicag {
  overflow: hidden;
}
.bationokang {
  position: absolute;
  transform: translate(-50%, -50%) scale(0);
  top: 50%;
  left: 50%;
  border: 6px solid rgba(255, 255, 255, 0.37);
  height: 100%;
  border-radius: 50%;
  width: 100%;
  transition: opacity 0.5s ease 0.4s, transform 0.5s;
}
.bationokangshow {
  transform: translate(-50%, -50%) scale(1.3);
  opacity: 0;
}

Код

let btnOne = document.getElementById("btn");
  let msg = document.getElementById("msg");
  let itms = document.getElementsByClassName("cesusineon");
  let snd = document.getElementById("kaseokanmsg");
  let close = document.getElementById("plus");
  let dialogText = document.getElementsByClassName("mss");
  let effct = document.querySelector(".bationokang");
  btnOne.addEventListener("click", function() {
  btnOne.classList.toggle("dexaesig");
  msg.classList.toggle("resize");
  snd.classList.toggle("kaseokan");
  close.classList.toggle("seoate-gieskan");
  effct.classList.toggle("bationokangshow");
  for (let i = 0; i <= dialogText.length; i++) {
  dialogText[i].classList.toggle("mss-show");
  itms[i].classList.toggle("skptimization");
  }
  });

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

Аналогично использоваться в веб-дизайне, печатных СМИ, рекламе, обложках книг и страниц, музыкальных произведениях, программных приложениях и многое другое.

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

16 Мая 2019 Загрузок: 1 Просмотров: 969 Комментариев: (0)

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

СКАЧАТЬ

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

Kosten

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