5

Bootstrap 5 Gradient Button Example

 2 years ago
source link: https://dev.to/frontendshape/bootstrap-5-gradient-button-example-36ll
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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.

view

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.

1)First you need to create button element and give .btn
2)Then Apply .bg-primary for background text-white
3)Finally you need to use .bg-gradient for gradient

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>

Enter fullscreen mode

Exit fullscreen mode


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK