Bootstrap Background Gradient Color Button Bootstrap Button Gradient Color And Animation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>buttan</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<style>
.btn.btn-primary {
color: var(--light);
border-radius: 30px;
text-align: center;
margin: 42px;
background: linear-gradient(-38deg, rgb(36, 0, 255) 0%, rgb(255, 0, 153));
filter: blur(0px) brightness(107%);
box-shadow: 15px -5px 17px 2px var(--gray-dark);
border-style: none;
border-color: var(--white);
padding: 7px 60px;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col"><button class="btn btn-primary" type="button">Button</button></div>
<div class="col"><button class="btn btn-primary" data-bss-hover-animate="swing" type="button"
style="background: linear-gradient(92deg, rgb(97,255,0), var(--gray-dark));">Button</button></div>
</div>
<div class="row">
<div class="col"><button class="btn btn-primary tada animated" type="button"
style="background: linear-gradient(#f2d13d, rgb(255,0,0));">Button</button></div>
<div class="col"><button class="btn btn-primary wobble animated infinite" type="button"
style="background: linear-gradient(92deg, rgb(97,255,0), #ff0099);">Button</button></div>
</div>
</div>
</body>
</html>
How To Use This Cord
steps
- Fast One Copy Html File.
- Copy CSS File And Past Head Part Top Fo Html File.
- File Save Name.html
- Ran Html File
- Ready To Use
Solve This Problem
- Linear-gradient Css
- Css Gradient Generator
- Gradient Image Generator
- Css Button Generator
- Gradient Button Css Codepen
- Animated Gradient Button Css
- Gradient Button Css W3schools
- Css Button Generator W3schools
- Gradient Color
- Radial-gradient Css
- Gradient Background Html
