Quiet Email Subscribe Button

Developer
ThatGuySam
Size
4,001 Kb
Views
30,360
  1. Quiet Email Subscribe Button Previews
  2. Quiet Email Subscribe Button HTML Codes
  3. Quiet Email Subscribe Button CSS Codes
  4. Quiet Email Subscribe Button JS Codes

How do I make an quiet email subscribe button?

A nice email subscribe button based on Google's Material Design. What is a quiet email subscribe button? How do you make a quiet email subscribe button? This script and codes were developed by ThatGuySam on 06 August 2022, Saturday.

Quiet Email Subscribe Button Previews
IQ Test

Quiet Email Subscribe Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Quiet Email Subscribe Button</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Lato:200,300,400,700'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/bootstrap-material-design/0.2.1/css/material.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <form class="switch-input mode-closed" action="" method="post" name="email" accept-charset="utf-8"> <input class="switch-input-box light" type="text" id="email" name="email" size="30" placeholder="Email Address"/> <span class="btn ease front-button" data-message="Subscribe"></span>
</form> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Quiet Email Subscribe Button - Script Codes CSS Codes

.ease,
.ease:before,
.ease:after { -webkit-transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); transition: all 500ms cubic-bezier(0.23, 1, 0.32, 1); /* easeOutQuint */ -webkit-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1); /* easeOutQuint */
}
body { background: #323232; font-family: "Lato", Helvetica; padding: 5em;
}
.switch-input { display: block; font-size: 1em; position: relative; width: 220px; margin: 0 auto; height: 2.3em; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; border: 1px solid #323232;
}
.switch-input:hover,
.switch-input:after:hover { cursor: pointer;
}
.switch-input .switch-input-box { position: absolute; left: 0; top: 0; width: 75%; height: 100%; font-size: 1em; line-height: 1.75em; text-indent: 1em; margin: 0; padding: 0.17em 0; border: none; outline: none;
}
.switch-input span { display: block; position: absolute; cursor: pointer;
}
.switch-input span.btn.front-button { position: absolute; z-index: 3; padding: 0.3em; color: #d8d8d8; text-align: center; white-space: nowrap; overflow: hidden; width: 220px; height: 100%; top: 0; right: 0; margin: 0; background-color: #323232;
}
.switch-input span.btn.front-button:before { content: attr(data-message); /* content: "Share to Phone"; */
}
.switch-input.opened span { display: block; position: absolute;
}
.switch-input.opened span.front-button { width: 60px;
}
.switch-input.opened span.front-button:before { content: "Close";
}
.switch-input.valid-number span.front-button { border: 1px solid #d8d8d8;
}
.switch-input.valid-number span.front-button:hover { border-color: #ffffff;
}
.switch-input.valid-number span.front-button:active { background-color: #f1f1f1;
}
.switch-input.valid-number span.front-button:before { content: "Send";
}
.switch-input.message-sending span.front-button:before { content: "Sending...";
}
.switch-input.message-sent span.front-button:before { content: "Thank You!";
}
.switch-input.message-fail span.front-button:before { content: "Something went wrong"; color: #ff0000;
}

Quiet Email Subscribe Button - Script Codes JS Codes

var selectorStart = "mode-";	var status = "closed";	$(".switch-input").on( "click", function() {	//var smsKey = $(this).data("key");	//var actionURL = $(this).data("action");	switch(status) { case "closed":	$(this)	.addClass("opened");	$(".switch-input-box").focus();	status = "opened"; break; case "opened":	$(this)	.removeClass("opened");	status = "closed";	break; case "send":	status = "sending";	//console.log(request);	$(this)	.removeClass("opened")	.addClass("message-"+status);	$(".switch-input").submit();	break; default:	}//switch(mode)	$(".switch-input").submit(function( event ) {	event.preventDefault();	var submitUrl = $(this).attr("action");	$.post( submitUrl, $(this).serialize())	.always(function() { var email = $("#email").val(); $("body").append("<br>"+email);	$(".switch-input").removeClass("message-"+status);	status = "sent";	$(".switch-input").addClass("message-"+status);	console.log( "Always: "+status );	setTimeout(function(){	$(".switch-input")	.removeClass("valid-number message-"+status);	status = "closed";	}, 1000);	});	});	$( ".switch-input-box" ).keyup(function() {	var testEmail = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;	if (testEmail.test( $(this).val() )) {	$(".switch-input")	.addClass("valid-number");	status = "send";	} else {	$(".switch-input")	.removeClass("valid-number");	status = "opened";	}	});	});//$(".switch-input").on( "click")
Quiet Email Subscribe Button - Script Codes
Quiet Email Subscribe Button - Script Codes
Home Page Home
Developer ThatGuySam
Username ThatGuySam
Uploaded August 06, 2022
Rating 3
Size 4,001 Kb
Views 30,360
Do you need developer help for Quiet Email Subscribe Button?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

ThatGuySam (ThatGuySam) Script Codes
Name
Real Time Guts Tweets
Abduzeedo Box Shadow 2016
Angry Face
Google Cardboard Apps
Vimeo Feed
Loading Animation for Anything
Auto Expiring Content
Guts Less Mixins
Twitter Feed
ARC Kinetic 1.1
Create amazing captions with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!