NiceSnippets.com
Different types of linear gradient button example using css and bootstrap
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 allows to free snippets of css gradient button examples , you can download full code of css button gradient border layout. Here in this post i will give you example of gradient buttons in bootstrap snippet and you will get simple code of html, css and jquery. In gradient background css snippet i give you three tab with html, css and js, you can easily get code of different types of linear gradient button layout.
<!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;
}
