Live Demo - Different types of linear gradient button example using css and bootstrap

See Free Live Demo example of Here We are giving you example of many types of linear gradient button example. In this demo we are give you all the types of linear gradient button design. you can simply use in your project. this linear gradient button support all the browser. and linear gradient can not take time to load. We a...

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/css?family=Barlow+Semi+Condensed" rel="stylesheet">
  <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="row text-center">
            <div class="offset-lg-2 col-lg-8 main-section">
                <h1>Linear Gradient Button</h1>
                <div class="row">
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn1">Click Me</button>
                    </div>
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn2">Click Me</button>
                    </div>
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn3">Click Me</button>
                    </div>
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn4">Click Me</button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn5">Click Me</button>
                    </div>
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn6">Click Me</button>
                    </div>
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn7">Click Me</button>
                    </div>
                    <div class="col-lg-3 col-sm-3 col-12">
                        <button class="btn btn-defult w-100 btn8">Click Me</button>
                    </div>
                </div>  
            </div>
        </div>
    </div>
</body>
</html>

*{
	font-family: 'Barlow Semi Condensed', sans-serif;
}
body{
	background-color: #8F6048 !important;
}
.main-section{
	margin-top:30px;
	background-color:#DFC184;
}
.main-section h1{
	color:#801638;
	margin:50px 0px;
}
.main-section .btn{
	color:#fff;
	margin-bottom:50px;
	border-radius: 20px;
	border:none;
}
.btn:hover{
	cursor: pointer;
}
.btn1{
	background: linear-gradient(45deg, red, blue);
	box-shadow: 4px 12px 27px -6px blue;
}
.btn2{
	background: linear-gradient(135deg, orange, orange 60%, cyan);
	box-shadow: 4px 12px 27px -6px orange;
}
.btn3{
	background:linear-gradient(to right, red, #f06d06, rgb(255, 255, 0), green);
	box-shadow: 4px 12px 27px -6px  #f06d06;
}
.btn4{
	background: -moz-linear-gradient(left, #2F2727, #1a82f7, #2F2727, #1a82f7, #2F2727);
	background: -webkit-gradient(linear, left top, right top, from(#2F2727), color-stop(0.25, #1a82f7), color-stop(0.5, #2F2727), color-stop(0.75, #1a82f7), to(#2F2727));
	box-shadow: 4px 12px 27px -6px  #1a82f7;
}
.btn5{
	background: linear-gradient(red, yellow);
	box-shadow: 4px 12px 27px -6px  red;
}
.btn6{
	background: linear-gradient(to right, red , yellow);
	box-shadow: 4px 12px 27px -6px  orange;
}
.btn7{
	 background: linear-gradient(#C16C86,#92CBDB,#F9B294);
	box-shadow: 4px 12px 27px -6px  #C16C86;
}
.btn8{
	background: radial-gradient(red, yellow, green);
	box-shadow: 4px 12px 27px -6px  green;
}