Button Pulse

Developer
A S P
Size
2,377 Kb
Views
6,072
  1. Button Pulse Previews
  2. Button Pulse HTML Codes
  3. Button Pulse CSS Codes

How do I make an button pulse?

Button with a pulsing glow effect in CSS. What is a button pulse? How do you make a button pulse? This script and codes were developed by A S P on 15 January 2023, Sunday.

Button Pulse Previews
IQ Test

Button Pulse - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Button Pulse</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href='https://fonts.googleapis.com/css?family=Share+Tech|Orbitron:500' rel='stylesheet' type='text/css'>
<div class="startContainer"> <button class="button pulseText">Launch</button>
</div>
<div class="startContainer"> <button class="button pulseBox">Launch</button>
</div>
<div class="startContainer"> <button class="button pulseBox button3">Launch</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

Button Pulse - Script Codes CSS Codes

html
{	background-color: #000;
}
body
{	-webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
/***********************************************************/
.startContainer
{	margin: 50px auto 0px auto;	text-align: center;
}
/***********************************************************/
.button
{ color: #6f6; font-family: 'Orbitron', Verdana, sans-serif; font-size: 2.2em; background: none;
}
.button:hover
{ color: #afa; cursor: pointer;
}
.button3
{ border-radius: 20px; padding: 10px 15px; color: #000; font-weight: bold; background: #66ff66; background: -moz-linear-gradient(top, #66ff66 0%, #aaffaa 70%, #66ff66 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#66ff66), color-stop(70%,#aaffaa), color-stop(100%,#66ff66)); background: -webkit-linear-gradient(top, #66ff66 0%,#aaffaa 70%,#66ff66 100%); background: -o-linear-gradient(top, #66ff66 0%,#aaffaa 70%,#66ff66 100%); background: -ms-linear-gradient(top, #66ff66 0%,#aaffaa 70%,#66ff66 100%); background: linear-gradient(to bottom, #66ff66 0%,#aaffaa 70%,#66ff66 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66ff66', endColorstr='#66ff66',GradientType=0 );
}
.button3:hover
{ color: #000; background: #44ee44; background: -moz-linear-gradient(top, #44ee44 0%, #aaffaa 70%, #44ee44 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#44ee44), color-stop(70%,#aaffaa), color-stop(100%,#44ee44)); background: -webkit-linear-gradient(top, #44ee44 0%,#aaffaa 70%,#44ee44 100%); background: -o-linear-gradient(top, #44ee44 0%,#aaffaa 70%,#44ee44 100%); background: -ms-linear-gradient(top, #44ee44 0%,#aaffaa 70%,#44ee44 100%); background: linear-gradient(to bottom, #44ee44 0%,#aaffaa 70%,#44ee44 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#44ee44', endColorstr='#44ee44',GradientType=0 );
}
/***********************************************************/
@-webkit-keyframes pulseBox { 0% {-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);} 100% {-webkit-box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
@-moz-keyframes pulseBox { 0% {-moz-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);} 100% {-moz-box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
@-o-keyframes pulseBox { 0% {-o-box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);} 100% {-o-box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
@keyframes pulseBox { 0% {box-shadow: 0px 0px 10px 0px rgba(0, 255, 0, 0.6);} 100% {box-shadow: 0px 0px 18px 0px rgba(0, 255, 0, 0.9);}
}
.pulseBox { -webkit-animation-name: pulseBox; -moz-animation-name: pulseBox; -o-animation-name: pulseBox; animation-name: pulseBox; -webkit-animation-duration: 1s; -moz-animation-duration: 1s; -o-animation-duration: 1s; animation-duration: 1s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; border: 0px;
}
/********************/
@-webkit-keyframes pulseText { 0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);} 100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
@-moz-keyframes pulseText { 0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);} 100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
@-o-keyframes pulseText { 0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);} 100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
@keyframes pulseText { 0% {text-shadow: 0px 0px 8px rgba(0, 255, 0, 0.7);} 100% {text-shadow: 0px 0px 22px rgba(0, 255, 0, 1);}
}
.pulseText { -webkit-animation-name: pulseText; -moz-animation-name: pulseText; -o-animation-name: pulseText; animation-name: pulseText; -webkit-animation-duration: 0.8s; -moz-animation-duration: 0.8s; -o-animation-duration: 0.8s; animation-duration: 0.8s; -webkit-animation-iteration-count: infinite; -moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: alternate; -moz-animation-direction: alternate; -o-animation-direction: alternate; animation-direction: alternate; -webkit-animation-timing-function: ease-in-out; -moz-animation-timing-function: ease-in-out; -o-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; border: 0px;
}
Button Pulse - Script Codes
Button Pulse - Script Codes
Home Page Home
Developer A S P
Username asp
Uploaded January 15, 2023
Rating 3
Size 2,377 Kb
Views 6,072
Do you need developer help for Button Pulse?

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!

A S P (asp) Script Codes
Name
Laser Underline Hover Menu
Paper Book with Folded Corner
SVG Marvin
Dr. Puyo
Color Palettes
Starfield using KineticJS
Laser Cat
Monster Name Generator
Typing Text
Grid with Fixed and Resizable Columns
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!