Subscribe Button

Developer
Todd Moy
Size
2,906 Kb
Views
6,072
  1. Subscribe Button Previews
  2. Subscribe Button HTML Codes
  3. Subscribe Button CSS Codes
  4. Subscribe Button JS Codes

How do I make an subscribe button?

Prototype / not fully functional. What is a subscribe button? How do you make a subscribe button? This script and codes were developed by Todd Moy on 14 October 2022, Friday.

Subscribe Button Previews
IQ Test

Subscribe Button - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Subscribe Button</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="subscribe-button"> <label for="e1"><span>Subscribe by Email</span></label> <div class="fields"> <input id="e1" class="email-input" type="email" placeholder="[email protected]" /> <input class="email-submit" type="submit" value="Subscribe" /> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Subscribe Button - Script Codes CSS Codes

* { box-sizing: border-box;
}
html, body { height: 100%; font-family: futura, helvetica, sans-serif;
}
body { display: flex; justify-content: space-around; align-items: center; flex-direction: column; background-color: pink;
}
.subscribe-button { background-color: black; border: solid black 2px; display: flex; flex-direction: column; width: 200px; height: 70px; overflow: hidden; transition: all 0.2s ease-out;
}
.subscribe-button label { display: flex; justify-content: center; align-items: center; background-color: black; color: white; cursor: pointer; position: relative; min-height: 100%; text-align: center; transition: all 0.2s ease-out;
}
.subscribe-button label:hover { background-color: white; color: black;
}
.subscribe-button .fields { background-color: blue; display: flex; flex-direction: row; min-height: 100%;
}
.subscribe-button .email-input { border: 0; font-size: 1em; flex-grow: 1; min-height: 100%; padding-left: 20px;
}
.subscribe-button .email-submit { background-color: black; color: white; border: 0; font-size: 1em; min-height: 100%; padding: 0 20px; cursor: pointer; border-left: solid black 2px;
}
.subscribe-button .email-submit:hover { background-color: white; color: black;
}
.subscribe-button:hover { background-color: black; color: white; cursor: pointer;
}
.subscribe-button--active { width: 400px;
}
.subscribe-button--active .fields,
.subscribe-button--active label { transform: translateY(-66px);
}

Subscribe Button - Script Codes JS Codes

$(document).ready(function(){ $("label").on('click', function(){ $(this).parent(".subscribe-button").addClass("subscribe-button--active"); }); $(".email-input").on('blur', function(){ $(this).parents(".subscribe-button").removeClass("subscribe-button--active"); })
});
Subscribe Button - Script Codes
Subscribe Button - Script Codes
Home Page Home
Developer Todd Moy
Username toddmoy
Uploaded October 14, 2022
Rating 3
Size 2,906 Kb
Views 6,072
Do you need developer help for 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!

Todd Moy (toddmoy) Script Codes
Name
Chrome Store Copy
Hidden Menu Test
Modal Interaction Test
Logo Animation
A Pen by Todd Moy
Menu Test
Experiment
Flexbox test
Experiment
Header Test
Create amazing video scripts 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!