<div class="container">
<h2>Notification Box <br /> <span>Inspired by <a href="https://site.uplabs.com/posts/notify-me-interface">Notify Me — Oleg Frolov</a></span></h2>
<form class="notify">
<label for="notify-email" class="notify__label" aria-label="hidden">email</label>
<input id="notify-email" class="notify__input" type="email" placeholder="email">
<button type="button" class="notify__button notify__send-button" id="send-button">Send</button>
<button type="button" class="notify__button notify__outer-button" id="outer-button">Notify Me</button>
<p id="thankyou-label" class="notify__thank-you-label">Thank You!</p>
</form>
</div>
$darksalmon: #e9967a;
* {
box-sizing: border-box;
}
*:after, *:before {
box-sizing: inherit;
}
body {
width: 100%;
height: 100%;
background-color: $darksalmon;
line-height: 1.5;
}
.container {
width: 100%;
margin: 5% auto;
padding: 1em 0;
font-size: 1.5rem;
text-align: center;
background-color: $darksalmon;
h2 {
color: white;
font-size: 1.6rem;
span {
font-size: 1.3rem;
a {
color: white;
}
}
}
}
.notify {
background: transparent;
position: relative;
margin: 0 auto;
width: 100%;
max-width: 320px;
text-align: center;
}
//hide textbox label
.notify__label {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
.notify__input {
position: relative;
top: 0px;
padding: 1em 5px;
border-radius: 30px;
transform: scaleX(0);
visibility: hidden;
width: 315px;
font-size: 0.9rem;
font-weight: 700;
line-height: 1.9;
border-color: transparent;
outline: none;
&:focus {
box-shadow: 1px 1px 3px $darksalmon inset;
}
}
.notify__button {
text-align: center;
border-radius: 15px;
background-color: transparent;
border: none;
outline: none;
}
.notify__send-button {
padding: 0.5em;
position: absolute;
top: 49%;
right:8px;
transform: translateY(-49%);
font-size: 1.3rem;
font-weight: 700;
background-color: lighten($darksalmon, 5);
color: #fefefe;
cursor: pointer;
transition: all 0.2s;
visibility: hidden;
&:hover,
&:focus {
background-color: $darksalmon;
color: white;
}
}
.notify__outer-button {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -60%);
width: 60%;
padding: 1rem;
font-size: 1.3rem;
font-weight: 700;
background-color: white;
color: $darksalmon;
cursor: pointer;
box-shadow: 1px 3px 0px rgba(0,0,0, .5);
transition: color 0.2s;
&:hover,
&:focus {
color: darken($darksalmon, 10);
}
}
.notify__thank-you-label {
position: absolute;
top: -29px;
left: 50%;
transform: translateX(-50%);
width: 100%;
padding: 0.7rem;
text-align: center;
font-size: 1.5rem;
font-weight: 800;
border-radius: 25px;
background-color: white;
color: $darksalmon;
visibility: hidden;
}
View Compiled
//vars
const emailInput = document.querySelector("#notify-email"),
sendButton = document.querySelector("#send-button"),
thankyouLabel = document.querySelector("#thankyou-label"),
outerButton = document.querySelector("#outer-button");
//scale down the initial button, the send button
//and the thank you label, so they can be
//scaled up when they make their entrances
//in the animation
TweenMax.set([outerButton, sendButton, thankyouLabel], { scale: 0.5 });
//this tween controls the entrance of the
//first button as the page loads
TweenMax.to(outerButton, 0.5, { scale: 1, ease: Back.easeOut.config(3) });
//code that triggers the appearance of the
//text box on button click
outerButton.addEventListener("click", function() {
//The text box appears over half a second
//and is scaled up
TweenMax.to(emailInput, 0.5, {
autoAlpha: 1,
scale: 1
});
//the initial button disappears from view
TweenMax.to(this, 1, {
autoAlpha: 0
});
//the send button appears over half a second
//and it's scaled up
TweenMax.to(sendButton, 0.5, {
autoAlpha: 1,
scale: 1,
delay: 0.5,
ease: Back.easeOut.config(3)
});
});
//code triggered after clicking the send button
sendButton.addEventListener("click", function() {
//thank you label appears and starts to scale up
TweenMax.to(thankyouLabel, 1, {
autoAlpha: 1,
scale: 0.7
});
//thank you label is scaled up completely
TweenMax.to(thankyouLabel, 1, {
scale: 1
});
//the text color inside the input box changes
//to white to make it invisible
TweenMax.to(
emailInput,
0,
{
color: "#ffffff"
});
//the input box is scaled down and removed
TweenMax.to(
emailInput,
0.2,
{
scaleX: 0,
autoAlpha: 0,
delay: 0.5
});
//the send button is removed
TweenMax.to(
this,
0.3,
{
autoAlpha: 0
});
//the thank you label is scaled up on the
//X axis
TweenMax.to(thankyouLabel, 0.5, {
scaleX: 0.6,
delay: 0.5,
ease: Back.easeOut.config(3)
});
//the font-size in the thank you label
//is enlarged to make it more readable
TweenMax.to(thankyouLabel, 0.5, {
fontSize: 25,
delay: 0.5
});
});
This Pen doesn't use any external CSS resources.