CSS animated buttons are a type of interactive button created using HTML and CSS animation and transitions. They provide a quick and easy way to add basic styling to any web page or application. They can also be used to trigger certain events or functions when clicked.
<a href="#" class="animted-button_1">
<span class="animated-button_1-top-layer">
<span aria-hidden="true" class="animted-button_1-BOowP">
</span>
<span class="animated-button_1-2fAFG">
<div class="animated-button_1-0tk6y">
Button Text
</div>
</span>
</span>
</a>.animted-button_1 {
text-decoration: none;
cursor: pointer;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.animted-button_1 .animated-button_1-top-layer {
z-index: 10;
border-radius: 8px;
padding: 1px;
margin: -1px;
position: relative;
overflow: hidden;
display: block;
isolation: isolate;
transform: translateZ(10px);
}
.animted-button_1 .animated-button_1-top-layer .animted-button_1-BOowP {
-webkit-animation: animated-button_ano8CUX 5s linear infinite;
animation: animated-button_ano8CUX 5s linear infinite;
filter: blur(6px);
background: conic-gradient(
transparent 135deg,
#fff 180deg,
transparent 255deg
),
conic-gradient(transparent -45deg, #fff 0deg, transparent 75deg);
transform-origin: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
display: block;
}
.animted-button_1 .animated-button_1-top-layer .animated-button_1-2fAFG {
position: relative;
z-index: 1000;
}
.animted-button_1
.animated-button_1-top-layer
.animated-button_1-2fAFG
.animated-button_1-0tk6y {
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: #fff;
border-radius: 8px;
background: #000;
transition: color 0.3s ease;
}
@keyframes animated-button_ano8CUX {
0% {
transform: scaleX(8) scaleY(1.5) rotate(0deg);
opacity: 1;
}
to {
transform: scaleX(8) scaleY(1.5) rotate(1turn);
opacity: 1;
}
}.animted-button_1 {
text-decoration: none;
cursor: pointer;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
.animated-button_1-top-layer {
z-index: 10;
border-radius: 8px;
padding: 1px;
margin: -1px;
position: relative;
overflow: hidden;
display: block;
isolation: isolate;
transform: translateZ(10px);
.animted-button_1-BOowP {
-webkit-animation: animated-button_ano8CUX 5s linear infinite;
animation: animated-button_ano8CUX 5s linear infinite;
filter: blur(6px);
background: conic-gradient(transparent 135deg, #fff 180deg, transparent 255deg),
conic-gradient(transparent -45deg, #fff 0deg, transparent 75deg);
transform-origin: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 8px;
display: block;
}
.animated-button_1-2fAFG {
position: relative;
z-index: 1000;
.animated-button_1-0tk6y {
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: #fff;
border-radius: 8px;
background: #000;
transition: color 0.3s ease;
}
}
}
}
@keyframes animated-button_ano8CUX {
0% {
transform: scaleX(8) scaleY(1.5) rotate(0deg);
opacity: 1;
}
to {
transform: scaleX(8) scaleY(1.5) rotate(1turn);
opacity: 1;
}
}<a href="#" class="animated-button_2">
<span class="animated-button_2-top-layer">
<span aria-hidden="true" class="animated-button_2-BOowP">
</span>
<span class="animated-button_2-2fAFG">
<div class="animated-button_2-0tk6y">
<p>Button Text</p>
</div>
</span>
</span>
</a>.animated-button_2 {
text-decoration: none;
cursor: pointer;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
}
.animated-button_2 .animated-button_2-top-layer {
z-index: 10;
border-radius: 50rem;
padding: 1px;
margin: -1px;
position: relative;
overflow: hidden;
display: block;
isolation: isolate;
transform: translateZ(10px);
}
.animated-button_2 .animated-button_2-top-layer .animated-button_2-BOowP {
-webkit-animation: animated-button-2_ano8CUX 5s linear infinite;
animation: animated-button-2_ano8CUX 5s linear infinite;
filter: blur(6px);
background: conic-gradient(
transparent 135deg,
#f27f05 180deg,
transparent 255deg
),
conic-gradient(transparent -45deg, #cf1a5c 0deg, transparent 75deg);
transform-origin: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50rem;
display: block;
transition: all 0.5s;
}
.animated-button_2 .animated-button_2-top-layer .animated-button_2-2fAFG {
position: relative;
z-index: 1000;
}
.animated-button_2
.animated-button_2-top-layer
.animated-button_2-2fAFG
.animated-button_2-0tk6y {
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: #fff;
border-radius: 50rem;
background: #000;
transition: color 0.3s ease;
}
@-webkit-keyframes animated-button-2_ano8CUX {
0% {
transform: scaleX(8) scaleY(1.5) rotate(0deg);
opacity: 1;
}
to {
transform: scaleX(8) scaleY(1.5) rotate(1turn);
opacity: 1;
}
}
@keyframes animated-button-2_ano8CUX {
0% {
transform: scaleX(8) scaleY(1.5) rotate(0deg);
opacity: 1;
}
to {
transform: scaleX(8) scaleY(1.5) rotate(1turn);
opacity: 1;
}
}.animated-button_2 {
text-decoration: none;
cursor: pointer;
touch-action: pan-y;
-webkit-tap-highlight-color: transparent;
.animated-button_2-top-layer {
z-index: 10;
border-radius: 50rem;
padding: 1px;
margin: -1px;
position: relative;
overflow: hidden;
display: block;
isolation: isolate;
transform: translateZ(10px);
.animated-button_2-BOowP {
-webkit-animation: animated-button_ano8CUX 5s linear infinite;
animation: animated-button_ano8CUX 5s linear infinite;
filter: blur(6px);
background: conic-gradient(transparent 135deg, #f27f05 180deg, transparent 255deg),
conic-gradient(transparent -45deg, #cf1a5c 0deg, transparent 75deg);
transform-origin: center center;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border-radius: 50rem;
display: block;
transition: all 0.5s;
}
.animated-button_2-2fAFG {
position: relative;
z-index: 1000;
.animated-button_2-0tk6y {
white-space: nowrap;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
color: #fff;
border-radius: 50rem;
background: #000;
transition: color 0.3s ease;
}
}
}
}
@keyframes animated-button_ano8CUX {
0% {
transform: scaleX(8) scaleY(1.5) rotate(0deg);
opacity: 1;
}
to {
transform: scaleX(8) scaleY(1.5) rotate(1turn);
opacity: 1;
}
}<a href="/" class="animted-button-pulse">Button Text</a>.animted-button-pulse {
background-color: #6366f1;
text-align: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 8px;
animation: pulse 2s infinite 1s cubic-bezier(0.25, 0, 0, 1);
box-shadow: 0 0 0 0 #6366f1;
color: white;
border: 2px solid #6366f1;
transition: color 0.2s ease 0s, background-color 0.2s ease 0s,
border 0.2s ease 0s;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 999999;
box-sizing: border-box;
text-decoration: none;
}
.animted-button-pulse:hover {
background-color: white !important;
color: #6366f1;
opacity: 1;
}
@keyframes pulse {
to {
box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
}
}.animted-button-pulse {
background-color: #6366f1;
text-align: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 8px;
animation: pulse 2s infinite 1s cubic-bezier(0.25, 0, 0, 1);
box-shadow: 0 0 0 0 #6366f1;
color: white;
border: 2px solid #6366f1;
transition: color 0.2s ease 0s, background-color 0.2s ease 0s, border 0.2s ease 0s;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 999999;
box-sizing: border-box;
text-decoration: none;
&:hover {
background-color: white !important;
color: #6366f1;
opacity: 1;
}
}
@keyframes pulse {
to {
box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
}
}<a href="#" class="animted-button-pulse-round">Button Text</a>.animted-button-pulse-round {
background-color: #6366f1;
text-align: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 50rem;
animation: pulse 2s infinite 1s cubic-bezier(0.25, 0, 0, 1);
box-shadow: 0 0 0 0 #6366f1;
color: white;
border: 2px solid #6366f1;
transition: color 0.2s ease 0s, background-color 0.2s ease 0s,
border 0.2s ease 0s;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 999999;
box-sizing: border-box;
text-decoration: none;
}
.animted-button-pulse-round:hover {
background-color: white !important;
color: #6366f1;
opacity: 1;
}
@keyframes pulse {
to {
box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
}
}.animted-button-pulse-round {
background-color: #6366f1;
text-align: center;
padding: 0.75rem 1.5rem;
font-size: 1rem;
border-radius: 50rem;
animation: pulse 2s infinite 1s cubic-bezier(0.25, 0, 0, 1);
box-shadow: 0 0 0 0 #6366f1;
color: white;
border: 2px solid #6366f1;
transition: color 0.2s ease 0s, background-color 0.2s ease 0s, border 0.2s ease 0s;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 999999;
box-sizing: border-box;
text-decoration: none;
&:hover {
background-color: white !important;
color: #6366f1;
opacity: 1;
}
}
@keyframes pulse {
to {
box-shadow: 0 0 0 18px rgba(255, 255, 255, 0);
}
}