Button Bootstrap 3,4,5 Gradient Background

0

M.b.patel June 21, 2021

Button Bootstrap 3,4,5 Gradient Background

  
  <!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .btn {
            border: none;
        }

        .btnc {
            background: #ff008c;
            color: rgb(255, 255, 255);
        }

        .btnc:hover {
            background-color: #ff00f2;
            color: white;
        }

        .btnc3 {
            background: #00e1ff;
            color: rgb(255, 255, 255);
        }

        .btnc3:hover {
            background-color: #1b00b3;
            color: white;
        }

        .btnc2 {
            background: #00ff15;
            color: rgb(255, 255, 255);
        }

        .btnc2:hover {
            background-color: #006300;
            color: white;
        }
        /* last */
        .btnc5 {
            background-color: #7f5a83;
            background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);

            color: rgb(255, 255, 255);
        }

        .btnc5:hover {
            background-color: #010cac;
            background-image: linear-gradient(315deg, #11a71e 0%, #ff0095 74%);
            color: white;
        }
        .btnc6 {
            background-color: #c800df;
            background-image: linear-gradient(315deg, #157aff 0%, #ff7b00 74%);

            color: rgb(255, 255, 255);
        }

        .btnc6:hover {
            background-color: #ffe600;
            background-image: linear-gradient(315deg, #2600fc 0%, #ff0095 74%);
            color: white;
        }
        .btnc7 {
            background-image: linear-gradient(315deg, #c7a200 0%, #000000 74%);

            color: rgb(255, 255, 255);
        }

        .btnc7:hover {
            background-image: linear-gradient(315deg, #000000 0%, #ff0095 74%);
            color: white;
        }
    </style>
    <title>HTML VS CSS</title>
</head>

<body>
    <div class="container">
        <h1 class="mt-5">Bootstrap Button</h1>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <a href="#" class="btn btn-primary mr-5">
                    <span class="glyphicon glyphicon-cloud-upload">
                    </span> Button</a>
                <a href="#" class="btn btn-secondary mr-5">
                    <span class="glyphicon glyphicon-cloud-upload">
                    </span> Button</a>
                <a href="#" class="btn btn-success mr-5">
                    <span class="glyphicon glyphicon-cloud-upload">
                    </span> Button</a>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <button type="button" class="btn btn-outline-primary mr-5">Primary</button>
                <button type="button" class="btn btn-outline-secondary mr-5">Secondary</button>
                <button type="button" class="btn btn-outline-success mr-5">Success</button>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <button type="button" class="btn btn-outline-primary mr-5 btnc">Primary</button>
                <button type="button" class="btn btn-outline-secondary mr-5 btnc2">Secondary</button>
                <button type="button" class="btn btn-outline-success mr-5 btnc3">Success</button>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <button type="button" class="btn btn-outline-primary mr-5 btnc5">Primary</button>
                <button type="button" class="btn btn-outline-secondary mr-5 btnc6">Secondary</button>
                <button type="button" class="btn btn-outline-success mr-5 btnc7">Success</button>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

</html>

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
        integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <style>
        .btn {
            border: none;
        }

        .btnc {
            background: #ff008c;
            color: rgb(255, 255, 255);
        }

        .btnc:hover {
            background-color: #ff00f2;
            color: white;
        }

        .btnc3 {
            background: #00e1ff;
            color: rgb(255, 255, 255);
        }

        .btnc3:hover {
            background-color: #1b00b3;
            color: white;
        }

        .btnc2 {
            background: #00ff15;
            color: rgb(255, 255, 255);
        }

        .btnc2:hover {
            background-color: #006300;
            color: white;
        }
        /* last */
        .btnc5 {
            background-color: #7f5a83;
            background-image: linear-gradient(315deg, #7f5a83 0%, #0d324d 74%);

            color: rgb(255, 255, 255);
        }

        .btnc5:hover {
            background-color: #010cac;
            background-image: linear-gradient(315deg, #11a71e 0%, #ff0095 74%);
            color: white;
        }
        .btnc6 {
            background-color: #c800df;
            background-image: linear-gradient(315deg, #157aff 0%, #ff7b00 74%);

            color: rgb(255, 255, 255);
        }

        .btnc6:hover {
            background-color: #ffe600;
            background-image: linear-gradient(315deg, #2600fc 0%, #ff0095 74%);
            color: white;
        }
        .btnc7 {
            background-image: linear-gradient(315deg, #c7a200 0%, #000000 74%);

            color: rgb(255, 255, 255);
        }

        .btnc7:hover {
            background-image: linear-gradient(315deg, #000000 0%, #ff0095 74%);
            color: white;
        }
    </style>
    <title>HTML VS CSS</title>
</head>

<body>
    <div class="container">
        <h1 class="mt-5">Bootstrap Button</h1>
        <div class="row">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <a href="#" class="btn btn-primary mr-5">
                    <span class="glyphicon glyphicon-cloud-upload">
                    </span> Button</a>
                <a href="#" class="btn btn-secondary mr-5">
                    <span class="glyphicon glyphicon-cloud-upload">
                    </span> Button</a>
                <a href="#" class="btn btn-success mr-5">
                    <span class="glyphicon glyphicon-cloud-upload">
                    </span> Button</a>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <button type="button" class="btn btn-outline-primary mr-5">Primary</button>
                <button type="button" class="btn btn-outline-secondary mr-5">Secondary</button>
                <button type="button" class="btn btn-outline-success mr-5">Success</button>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <button type="button" class="btn btn-outline-primary mr-5 btnc">Primary</button>
                <button type="button" class="btn btn-outline-secondary mr-5 btnc2">Secondary</button>
                <button type="button" class="btn btn-outline-success mr-5 btnc3">Success</button>
            </div>

            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 mt-5">
                <button type="button" class="btn btn-outline-primary mr-5 btnc5">Primary</button>
                <button type="button" class="btn btn-outline-secondary mr-5 btnc6">Secondary</button>
                <button type="button" class="btn btn-outline-success mr-5 btnc7">Success</button>
            </div>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
    integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN"
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
    integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
    crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
    integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
    crossorigin="anonymous"></script>

</html>

Button Bootstrap
Bootstrap Buttons
Bootstrap 4 Buttons
Bootstrap Button Classes
Bootstrap 4 Button

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

Tags

BorderAnimation Button Cordpen css freedownload Github HoverEffects html js SimpleExample web-beast.com

Newer
Older

Post a Comment

* Please Don't Spam Here. All the Comments are Reviewed by Admin.