Hello friend, Toady you will learn how to use bootstrap 5 gradient button. In this section we will not use any external or internal css classes , we will create gradient button using bootstrap 5 in build classes. first you need to setup bootstrap 5 project. you can read below article.
How to install & setup bootstrap 5
How to use Bootstrap 5 Gradient button
Bootstrap 5 support Background gradient class. by adding .bg-gradient class you create gradient color.
Example
<!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>Bootstrap 5 Gradient Button Example</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<button type="button" class="text-white btn bg-primary bg-gradient">Primary</button>
<button type="button" class="text-white btn bg-secondary bg-gradient">Secondary</button>
<button type="button" class="text-white btn bg-success bg-gradient">Success</button>
<button type="button" class="text-white btn bg-danger bg-gradient">Danger</button>
<button type="button" class="text-white btn bg-warning bg-gradient">Warning</button>
<button type="button" class="text-white btn bg-info bg-gradient">Info</button>
<button type="button" class="text-black btn bg-light bg-gradient">Light</button>
<button type="button" class="text-white btn bg-dark bg-gradient">Dark</button>
</body>
</html>
Bootstrap 5 Gradient button collection
