Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Email Optin
<div class="optin-container">
<div class="cta">Sign Up for my Newsletter</div>
<form class="form hidden">
<input type="email" id="email" name="email" placeholder="" />
<input type="submit" value="Submit" />
</div><!--end .container-->
$( document ).ready(function() {
$(".cta").click(function() {
// if form is visible
if ($("form").is(":visible")) {
// change .cta cursor to default
$(".cta").css('cursor', 'default');
<script src="//"></script>
<script src="//"></script>
@import url(,600,300)
// Colors
$gray: #EEEEEE
$orange: #FF9966
$red: #E52B50
$darkred: #9C2542
$text: #212121
box-sizing: border-box
background: $gray
color: $text
family: 'Source Sans Pro'
size: 16px
padding: 4rem 2rem 2rem
display: flex
justify-content: center
flex-flow: row wrap
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)
width: 30rem
background: $red
color: white
cursor: pointer
display: block
font-size: 2rem
line-height: 1
padding: 1.75rem 1rem
text-align: center
text-decoration: none
width: 100%
@media screen and (max-width: 600px)
line-height: 1.4
padding: 1.25rem 1rem
background: $darkred
display: flex
flex-flow: row nowrap
padding: 1rem
maring: 0
padding: .75rem
margin: 0
border: none
font-size: 1rem
flex: 1
outline: $red
outline: .25rem solid $red
background: linear-gradient(lighten($red, 5%), lighten($red, 0%))
cursor: pointer
color: white
border: none
font-size: 1rem
margin: 0 0 0 1rem
padding: 0 3rem
transition: all .25s ease-in-out
background: linear-gradient(lighten($red, 6%), lighten($red, 1%))
@media screen and (max-width: 600px)
flex-flow: row wrap
padding: 1rem !important
margin: 0 !important
flex: 100%
margin-top: 1rem !important
display: none
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment