Popup Chat Window With CSS and Javascript Creation

Netbax Online Editor Try it Yourself

<div id="netb"><p class="netb6">If you’d like to send us feedback, or have any other question, please fill out the form below and we will get back to you as soon as possible.</p></div>

<button type="submit" class="netb2">Submit</button>

<button type="button" id="close-button" class="netb3" onclick="chatClose()">Close</button>

<button type="reset" value="Reset" name="reset" class="netb1">Reset</button>

</form></div>

<style>

.chat {
background-image: url(https://www.netbax.net/creation/css/email.png);
width: 90px;
height: 90px;
background-color: transparent;
border-radius: 0%;
border: 0px solid #ff0000;
vertical-align: middle;
position: fixed;
bottom: 80px;
right: 20px;
display: block;
cursor: pointer;}

.te {
width: 360px;
height: 440px;
border-radius: 10px;
background-color:#222;
padding: 16px;
z-index: 9999999;
 position: fixed;
bottom: 100px;
right: 155px;
display: none;}

#netb {
background-image: url(https://www.netbax.net/creation/css/logo.png);
background-position: 5px 0px;
background-repeat: no-repeat;}

.netb1 {
font-size: 17px;
  min-width: 30px;
  height: 30px;
float:right;
font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  z-index: 0;
background-color: transparent;
  overflow: hidden;
  border: 1px solid #fff;
  color: #ccc;}

.netb1:hover {
  color: #fff;
border-color: #fff;}

.netb1:hover:after {
  width: 100%;}

.netb1:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
background-color:#960018;}

.netb2 {
font-size: 17px;
  min-width: 30px;
  height: 30px;
float:left;
  font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  z-index: 0;
background-color:#960018;
  overflow: hidden;
  border: 1px solid #fff;
  color: #fff;}

.netb2:hover {
  color: #ccc;
border-color: #fff;}

.netb2:hover:after {
  width: 100%;}

.netb2:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
background-color:#222;}

.netb3 {
font-size: 17px;
  min-width: 30px;
  height: 30px;
margin-left: 80px;
font-weight: normal;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
  outline: none;
  border-radius: 5px;
  z-index: 0;
background-color:#008000;
  overflow: hidden;
  border: 1px solid #fff;
  color: #fff;}

.netb3:hover {
  color: #ccc;
border-color: #fff;}

.netb3:hover:after {
  width: 100%;}

.netb3:after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: all 0.3s ease;
  left: 0;
  top: 0;
  width: 0;
  height: 100%;
background-color:#222;}

.netb4{
padding:8px;
display:block;
border:none;
border-bottom:1px solid #ccc;
width:100%;
border-radius:4px;
color: #000;}

.netb5{
display:block;
border:none;
border-bottom:1px solid #ccc;
width:100%;
height:100px;
border-radius:4px;
text-decoration:none;
color: #000;}

.netb6 {
font-size:14px;
text-transform: capitalize;
  padding: 0px 50px;
margin-left:60px;
color: #fff;
font-family:tahoma;}

::placeholder {
  color: #333;
  opacity: 1;}

.x-netb{margin-top:16px!important;margin-bottom:16px!important}

</style>

function chat() {
  document.getElementById("open").style.display = "none";
  document.getElementById("close").style.display = "block";
  document.getElementById("lolo").style.display = "block";}
function chatClose() {
  document.getElementById("open").style.display = "block";
  document.getElementById("close").style.display = "none";
  document.getElementById("lolo").style.display = "none";}

</script>