Subscribe Button

Developer
Sasha
Size
2,991 Kb
Views
184,184
  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?

Click Me.. What is a subscribe button? How do you make a subscribe button? This script and codes were developed by Sasha on 12 June 2022, Sunday.

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="css/style.css">
</head>
<body> <div class="wrap"> <div> <input type="checkbox" id="toggle" /> <label class="button" for="toggle" > </label> </div> <div class="parent"> <div class="text sub">Subscribe Now </div> <div class="text thanks">Thanks for Subscribing </div> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Subscribe Button - Script Codes CSS Codes

@import url("https://fonts.googleapis.com/css?family=Open+Sans");
body { background: #21CDB2;
}
.wrap { height: 100vh; display: flex; justify-content: center; align-items: center;
}
.wrap div { display: flex; justify-content: center; align-items: center; margin: 8px;
}
.parent { position: relative;
}
.parent .sub { transition: all 0.5s ease-in-out;
}
.parent .thanks { font-size: 13px; transition: all 0.5s ease-in-out; position: absolute; top: -5px; left: 0; opacity: 0;
}
.text { font-size: 17px; color: #F5F5F5; font-family: 'Open Sans', sans-serif; letter-spacing: 2px; text-transform: uppercase; transition: all 0.5s ease-in-out;
}
#toggle { display: none;
}
.button { position: absolute; z-index: 999; width: 28px; height: 28px; background: #F9F9F9; border-radius: 10%; transition: all 0.5s ease-in-out; cursor: pointer;
}
.button:before { position: absolute; top: 13px; left: 6px; content: ''; width: 16px; height: 2px; background: #21CDB2; transform: rotate(90deg);
}
.button:after { position: absolute; top: 13px; left: 6px; content: ''; width: 16px; height: 2px; background: #21CDB2;
}
#toggle:checked ~ .nav { opacity: 1; transform: translateY(10%);
}
#toggle:checked ~ .button { transform: rotate(135deg); box-shadow: 0 0 0 0 transparent; border-radius: 100%;
}
#toggle:checked ~ .subbed { opacity: 1;
}

Subscribe Button - Script Codes JS Codes

// $(".button").blur(function() {
// alert("lost");
// });
$('#toggle').click(function() { if ($(this).is(":checked")) { $(".sub").css("opacity", 0); $(".thanks").css("opacity", 1); } else if ($(this).is(":not(:checked)")) { $(".sub").css("opacity", 1); $(".thanks").css("opacity", 0); }
});
Subscribe Button - Script Codes
Subscribe Button - Script Codes
Home Page Home
Developer Sasha
Username sashatran
Uploaded June 12, 2022
Rating 4.5
Size 2,991 Kb
Views 184,184
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!

Sasha (sashatran) Script Codes
Name
VueJS Zip Code Finder
Google Inspired Floating Action Button
Pages of 2017
SVG Filter Gooey Share, Social Media Button
Animated CSS Tooltip
CSS Girl
CSS Gallery Hover Effect
Svg Stars Experiment
VueJS Todo List
Moving head with Parallax.js
Create amazing blog posts 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!