Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<a href="http://www.bloggerunlocker.tk/" class="jelly" target="_blank">Jelly</a>
<br/>
<footer>
Made by <a href="http://bloggerunlocker.tk" target="_blank">Abhinav</a>
</footer>
@import url(http://fonts.googleapis.com/css?family=PT+Sans+Narrow:700);
body {
background:#F1C40F;
height:100%;
text-align:center;
}
.jelly {
font-size:24px;
font-family: 'PT Sans Narrow', sans-serif;
border: none;
cursor: pointer;
padding: 25px 80px;
display: inline-block;
margin: 15px;
margin-top:200px;
text-transform: uppercase;
letter-spacing: 6px;
font-weight: 700;
outline: 0;
position: relative;
border-radius: 3px;
-webkit-animation: anim 2s ease-in infinite;
animation: anim 2s ease-in infinite;
transition: all .3s;
background: #3498DB;
color: #fff!important;
overflow: hidden;
text-decoration:none;
}
.jelly:active {
background: #4786b5;
}
@-webkit-keyframes anim {
5% {
-webkit-transform: scale(1.1, .9);
transform: scale(1.1, .9);
}
10% {
-webkit-transform: scale(.9, 1.1) translateY(-.5rem);
transform: scale(.9, 1.1) translateY(-.5rem);
}
15% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes anim {
5% {
-webkit-transform: scale(1.1, .9);
transform: scale(1.1, .9);
}
10% {
-webkit-transform: scale(.9, 1.1) translateY(-.5rem);
transform: scale(.9, 1.1) translateY(-.5rem);
}
15% {
-webkit-transform: scale(1);
transform: scale(1);
}
}
@media only screen and (max-width:640px) {
.jelly {
padding: 25px 50px;
font-size: 16px;
}
}
footer {
font-family: 'PT Sans Narrow', sans-serif;
color:#605d5d;
letter-spacing:3px;
text-transform:uppercase;
font-size:15px;
}
footer a {
color:#ce4a4a;
text-decoration:none;
-webkit-transition:0.3s;
}
footer a:hover {
color:#2b2b2b;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.