Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Button with Hover Effect
<div class="container">
<div class="title">
<a href="" target="_blank">Subscribe Now</a>
//Without JS by Ana Tudor
// by Scott
//Button to zoom in instead of moving down
<script src=""></script>
@import url('');
* {
padding: 0;
margin: 0;
.container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: linear-gradient(50deg, #B388EB, #8093F1);
opacity: 0.8;
filter: saturate(1.6);
.title {
width: 200px;
height: 20px;
font-size: 16px;
font-family: 'Roboto', sans-serif;
color: #FFF;
text-transform: uppercase;
text-align: center;
letter-spacing: 4px;
background: rgba(#000000, 0.2);
padding: 15px 20px;
transition: all .5s ease;
border-radius: 3px;
cursor: pointer;
a {
text-decoration: none;
color: #FFF;
.is-active {
box-shadow: 0 20px 5px -10px rgba(#000, 0.4);
transform: translateY(10px);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment