<div id="button" class="css-button">
support CSS
</div>
<div id="button" class="gsap-button">
support GSAP
</div>
@import url(https://fonts.googleapis.com/css?family=Open+Sans);
html, body {
font-family: 'Open Sans';
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
background: #1E1F26;
}
#button {
margin: 4%;
padding: 1% 4%;
border-radius: 1px;
background: blck;
color: white;
font-size: 16px;
border: 1px solid white;
cursor: pointer;
}
.css-button {
animation: inout 1s ease infinite;
}
.gsap-button {
border: 1px solid #82c303 !important;
}
@keyframes inout {
0% {
box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
box-shadow: 0 0 0 0px rgba(255,255,255,0.4);
}
100% {
box-shadow: 0 0 0 20px rgba(255,255,255,0);
box-shadow: 0 0 0 20px rgba(255,255,255,0);
box-shadow: 0 0 0 20px rgba(255,255,255,0);
}
}
gsap.fromTo(".gsap-button", {
boxShadow: "0 0 0 0px rgba(130, 195, 3, 0.4)"
}, {
boxShadow: "0 0 0 20px rgba(130, 195, 3, 0)",
repeat: -1,
duration: 1
});
This Pen doesn't use any external CSS resources.