Оригинальное оформление кнопки отправить

Разработка Оригинальное оформление кнопки отправить

Нет прав для скачивания
Оригинальное оформление кнопки отправить.
Пишем нашу разметку:
HTML:
<body onload='init()'>
  <div class='super-container'>
    <div id='container' class='container' onclick='onClick()'>
      <div id='circle' class='circle'></div>
      <div id='text' class='text'>Submit</div>
    </div>
  </div>
</body>
Пишем наш стиль:
CSS:
*{
  font-family: 'Roboto';
}

.super-container {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container {
  width: 200px;
  height: 43px;
  position: relative;
  text-align: center;
  border-radius: 25px;
  background-color: #D3E5FB;
  background: linear-gradient(
    to left,
    #D3E5FB,
    #D3E5FB 50%,
    #4675a8 50%,
    #3c95fb
  );
  background-position: 90% 0;
  background-size: 200% 100%;
  border: 2px solid #3c95fb;
  pointer-events: all;
  transition: 0.7s all;
}

.reset-background {
  border-radius: 25px;
  background-color: #D3E5FB;
  background: linear-gradient(
    to left,
    transparent,
    transparent 50%,
    #4675a8 50%,
    #3c95fb
  );
  background-position: 90% 0;
  background-size: 200% 100%;
}

.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  left: 0%;
  height: 44px;
  width: 44px;
  background-color: #3c95fb;
  border-radius: 50%;
  box-shadow: 1px 1px 10px grey;
  transition: 0.7s all;
}

.text {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #3c95fb;
  user-select: none;
}

.text-request {
  color: #D3E5FB;
}

.request {
  left: calc(88% - 42px);
}

.receive {
  left: calc(100% - 42px);
  background-color: #4EC10F;
  transition: 2.7s all;
}

.failure {
  left: 0;
}

.background-request {
  background-position: 23% 0;
  user-select: none;
  pointer-events: none;
}

.background-receive {
    background-position: 0 0;
    background: #daffd9;
    border-color: #4ABD5D;
    user-select: none;
    pointer-events: none;
    transition: 1.7s all;
}

.background-failure {
  background-position: 90% 0;
  user-select: none;
  pointer-events: none;
  transition: 0.7s all;
}

.text-success {
  color: #59bf42;
}

.rotate {
  -webkit-animation:spin 2s linear infinite;
  -moz-animation:spin 2s linear infinite;
  animation:spin 2s linear infinite;
  transition: 2.7s all;
}

@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } }
Пишем jquery:
JavaScript:
function init() {
  updateSVG('init');
}

function onClick() {
  updateSVG('request');
  addClass('container', 'background-request');
  addClass('circle', 'request');
  addClass('text', 'text-request');
  changeText('Loading...');

 
  setTimeout(() => {
    /*
    Call on request success
    */
    receive();
    reset();
  }, 2000);
 
  
  // setTimeout(() => {
  //   /*
  //   Call on request failure
  //   */
  //   failure();
  // }, 2000); 
 
}


/*
@description: Methods executed on request success
*/
function receive(){
   updateSVG('receive');
   removeClass('container', 'background-request');
   addClass('container', 'background-receive');
   addClass('circle', 'receive');
   addClass('text', 'text-success');
   changeText('Success!');
   removeClass('text', 'text-request');
}

/*
@description: Methods executed on request failure
*/
function failure(){
   reset();
}

function reset(){
  setTimeout(()=>{
    removeClass('container', 'background-request');                   
    removeClass('container', 'background-receive');
    removeClass('circle', 'request');
    removeClass('circle', 'receive');
    removeClass('text', 'text-success');
    changeText('Submit');
    updateSVG('init');
  },3000)
}


/*
@utlilty function
@description - Adds class to a element
*/
function addClass(elementId, classname) {
  var element, name, arr;
  element = document.getElementById(elementId);
  name = classname;
  arr = element.className.split(" ");
  if (arr.indexOf(name) == -1) {
    element.className += " " + name;
  }
}

/*
@utlilty function
@description - Removes class to a element
*/
function removeClass(id, className) {
  var element = document.getElementById(id);
  element.classList.remove(className);
}

function changeText(value){
  var text = document.getElementById('text');
  text.innerText = value;
}

function updateSVG(state) {
  var circle = document.getElementById('circle');
 
  if(state === 'init') {
       circle.innerHTML = '<svg id="send" width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-600.000000, -242.000000)" fill="#FFFFFF"><path d="M613.280832,242.117931 C613.811347,241.831834 614.115509,242.084273 613.958803,242.680589 L611.174009,253.230839 C611.017303,253.826595 610.886171,254.312399 610.88345,254.311277 C610.88073,254.310716 610.877465,254.300057 610.877465,254.296691 C610.877465,254.293326 610.423671,254.10035 609.868671,253.867546 L608.042612,253.101254 C607.488156,252.867889 606.577304,252.49428 606.020127,252.272134 L605.82751,252.194158 C605.270333,251.970329 605.148451,251.419452 605.558171,250.970112 L611.211553,244.73039 C611.620185,244.279367 611.569582,244.222708 611.099465,244.604732 L603.948672,250.418112 C603.476377,250.799014 602.634083,250.921868 602.078539,250.695234 L600.43204,250.024308 C599.875407,249.797114 599.853643,249.376943 600.384157,249.090285 L613.280832,242.117931 Z M605.61748,252.901547 C606.171392,253.135474 606.35748,253.749741 606.029921,254.26696 C606.029921,254.26696 604.870951,256.097981 604.904686,255.995884 C604.937333,255.893225 603.76476,252.979523 603.764216,252.979523 C603.534598,252.409012 603.800127,252.134695 604.354039,252.368621 L605.61748,252.901547 Z" id="Combined-Shape"></path></g></g></svg>'
  }
 
  if(state === 'request') {
    
    circle.innerHTML = '<svg class="rotate" width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><circle id="path-1" cx="1030" cy="249" r="8"></circle><mask id="mask-2" maskContentUnits="userSpaceOnUse" maskUnits="objectBoundingBox" x="0" y="0" width="16" height="16" fill="white"><use xlink:href="#path-1"></use></mask></defs><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-dasharray="2,2"><g transform="translate(-1022.000000, -241.000000)" fill-rule="nonzero" stroke="#FFFFFF" stroke-width="4"><use id="Oval" mask="url(#mask-2)" xlink:href="#path-1"></use></g></g></svg>';
  
  }
 
  if(state === 'receive') {
    circle.innerHTML = '<svg width="13px" height="10px" viewBox="0 0 13 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-1086.000000, -244.000000)" fill="#FFFFFF"><polygon id="Path" points="1090.58843 254 1086 249.384589 1087.52935 247.846184 1090.58843 250.92319 1097.47065 244 1099 245.538405"></polygon></g></g></svg>' 
  }
 
}
Смотрим наш результат:
fg18.gif
Автор
baltun
Скачиваний
1
Просмотры
631
Первый выпуск
Обновление
Рейтинг
0.00 звёзд Оценок: 0

Ещё ресурсы от baltun

Похожие ресурсы
Назад
Верх Низ