gecko-css forms

by Petr Haluza

HTML

<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/reset.css">
<link rel="stylesheet" href="https://haluzovic.cz/gecko-css/assets/css/flex-grid.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Quicksand:[email protected]&display=swap" rel="stylesheet">


<div class="fl row wrap ai:c jc:l" style="--gap: 1em">

	<!-- form submission -->
<form id="form">
  <p>How can we improve this email?</p>
  <input placeholder="Give us an earful!" type="text" name="comment">
</form>


<!-- confirmation bubble -->
<div id="confirm" class="disappear">
  <div class="column">
    <h1>Thank you for your time!</h1>
    <p>Your feedback helps us make our communications better for everyone.</p>
  </div>
</div>



		
		<button class="btn-blue-r:2" id="button">
			<span>Button</span>
<svg viewBox="0 0 60 60">
  <path id="p3" d="M 20 10 40 30 20 50" fill="none" stroke-width="8" stroke-linecap="round" pathLength="100" stroke="currentcolor" />
</svg>			
		</button>
		<button class="disappear" id="finish" type="button">
  <i class="fa fa-check" aria-hidden="true"></i> 
</button>
		<div id="circle"></div> 
		
		
	</div><!-- /flex -->

CSS

/**** Buttons ****/
:root {
	--white: #fdfeff;
	--lgray: #eaeff4; /* default btn bg */
	--mgray: #dee3e8; /* default btn border */
	--rgray: #aea3a8; 
	--dgray: #535f6a; /* default btn text */
	--blue: #2563eb;
}


[class*=btn-] { padding: .75em 1em; 
display: inline-flex; align-items: center;
border: 1px solid var(--mgray); background: var(--lgray); color: var(--dgray); box-shadow: 0;
text-decoration: none; line-height: 1.25em; font-weight: 600;
cursor: pointer; transition: all .1s;}
[class*=btn-]:hover {box-shadow:0 10px 10px -10px var(--white) inset}
[class*=btn-]:active { transform: translateY(2px);}

[class*=btn-][class*=-blue] {	background: var(--blue);	color: var(--white); border: 1px solid var(--blue);}

[class*=btn-][class*=-s\:sm] { padding: .5em .75em; font-size: .9em;}
[class*=btn-][class*=-s\:md] { }
[class*=btn-][class*=-s\:lg] { padding: .95em 1.2em; font-size: 1.1em;}

[class*=btn-][class*=-r\:1] { border-radius: .25em}
[class*=btn-][class*=-r\:2] { border-radius: .5em}
[class*=btn-][class*=-r\:3] { border-radius: .75em}
[class*=btn-][class*=-r\:4] { border-radius: 1em}

[class*=btn-] > svg {	height: 1em; margin: 0 .5em 0 0}

.btnGroup { display:flex}
.btnGroup [class*=btn-]:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important}
.btnGroup [class*=btn-]:not(:first-child):not(:last-child) { border-radius: 0}
.btnGroup [class*=btn-]:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important}

[class*=btn-][disabled] { pointer-events:none; opacity: .6}

[class*=btn-][data-clicked] { box-shadow: 0 0 20px red}
[class*=btn-][data-clicked="2"] { box-shadow: 0 0 20px blue}
/**** /Buttons ****/


$blue:#085ff7;
$light-grey:#EEEEED;
$dark-grey: #CACAC9;
$green: #00B887;
$width-height:50px;
   
	 
button{
  font-weight:bold;
  outline:none;
  width:244px;
  height:$width-height;
  background: $blue;
  color:#fff;
  text-align: center;
  font-size:15px;
  border-radius:40px;
 ...

JavaScript

$("#button").click(function() {
  
  // remove blue button, transition to grey loading circle - change 1500 to loadtime of when form is completed
  $("#button").addClass("grey-button");
  $("#circle").addClass("grey-outline");
  
  setTimeout(function() {
    $(".grey-button").addClass("disappear");
    $("#finish").removeClass("disappear");
    //$("#form").addClass("disappear");
    
    
    // once grey loading circle is complete, remove submission form, make confirmation text appear
    
    $(".column").addClass("disappear");
    $("#confirm").animate({
       width:'toggle'
    });
    
    $("#circle").removeClass("grey-outline");
    
    setTimeout(function(){
      $(".column").removeClass("disappear").fadeIn('slow');
    }, 500)
    
  }, 1500);
  
    
  
});
                   
/*
 function changeImage(){
     document.querySelector('#side-chat img').src = "icon-cancel.svg";
 }
 */