YouTube Video Link: Awesome Pulsation button using Html CSS purely
Html CSS Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.container {
width: 300px;
height: 300px;
perspective: 1000;
backface-visibility: hidden;
background: #fff;
background-color: black;
}
.pulse-button {
position: relative;
top: 50%;
left: 50%;
margin-left: -50px;
margin-top: -50px;
display: block;
width: 300px;
height: 300px;
font-size: 2.3em;
font-weight: light;
font-family: 'Trebuchet MS', sans-serif;
text-transform: uppercase;
text-align: center;
line-height: 300px;
letter-spacing: -1px;
color: white;
border: none;
border-radius: 50%;
background: #87d45abc;
cursor: pointer;
box-shadow: 0 0 0 0 rgba(197, 219, 50, 0.805);
animation: pulse 1.5s infinite;
}
.pulse-button:hover {
animation: none;
}
@keyframes pulse {
0% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
70% {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
box-shadow: 0 0 0 50px rgba(90, 153, 212, 0);
}
100% {
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
box-shadow: 0 0 0 0 rgba(90, 153, 212, 0);
}
}
</style>
</head>
<body style="background-color:black;">
<div class='container'>
<span class='pulse-button'>Blink Coders</span>
</div>
</body>
</html>
Thanks for Visiting Blinks Coders!
Tags:
button, css button animation, button hover effect using css, pulsing play button, pulse effect using css animation, pulsing ring animation, html5 video custom play button, css button hover effects, pulsing circle, add html5 video overlay play button, pulsing button using css, video play button animation in html, button animation, css button, neon button using css, pulse effect on button usicssng css, buttons with awesome hover effects using only html & css
Post a Comment