Material Design Gradient Button
<!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>HTML VS CSS</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/css/mdb.min.css" rel="stylesheet">
<style>
.btn-rounded {
border-radius: 10em;
}
h1{
text-align: center;
margin: 20px;
}
</style>
</head>
<body>
<h1>HTML VS CSS</h1>
<button class="btn peach-gradient">Peach</button>
<button class="btn purple-gradient">Purple</button>
<button class="btn blue-gradient">Blue</button>
<button class="btn aqua-gradient">Aqua</button>
<BR>
<BR>
<button type="button" class="btn btn-outline-primary waves-effect">Primary</button>
<button type="button" class="btn btn-outline-default waves-effect">Default</button>
<button type="button" class="btn btn-outline-secondary waves-effect">Secondary</button>
<button type="button" class="btn btn-outline-success waves-effect">Success</button>
<button type="button" class="btn btn-outline-info waves-effect">Info</button>
<button type="button" class="btn btn-outline-warning waves-effect">Warning</button>
<button type="button" class="btn btn-outline-danger waves-effect">Danger</button>
<BR>
<BR>
<button type="button" class="btn btn-primary btn-rounded">Primary</button>
<button type="button" class="btn btn-default btn-rounded">Default</button>
<button type="button" class="btn btn-secondary btn-rounded">Secondary</button>
<button type="button" class="btn btn-success btn-rounded">Success</button>
<button type="button" class="btn btn-info btn-rounded">Info</button>
<button type="button" class="btn btn-warning btn-rounded">Warning</button>
<button type="button" class="btn btn-danger btn-rounded">Danger</button>
<BR>
<BR>
<button type="button" class="btn btn-outline-primary btn-rounded waves-effect">Primary</button>
<button type="button" class="btn btn-outline-default btn-rounded waves-effect">Default</button>
<button type="button" class="btn btn-outline-secondary btn-rounded waves-effect">Secondary</button>
<button type="button" class="btn btn-outline-success btn-rounded waves-effect">Success</button>
<button type="button" class="btn btn-outline-info btn-rounded waves-effect">Info</button>
<button type="button" class="btn btn-outline-warning btn-rounded waves-effect">Warning</button>
<button type="button" class="btn btn-outline-danger btn-rounded waves-effect">Danger</button>
<BR>
<BR>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-pink btn-rounded">Left</button>
<button type="button" class="btn btn-pink btn-rounded">Middle</button>
<button type="button" class="btn btn-pink btn-rounded">Right</button>
</div>
<BR>
<BR>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn purple-gradient btn-rounded">Left</button>
<button type="button" class="btn purple-gradient btn-rounded">Middle</button>
<button type="button" class="btn purple-gradient btn-rounded">Right</button>
</div>
<BR>
<BR>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-default">1</button>
<button type="button" class="btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
<button type="button" class="btn btn-default">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.4/umd/popper.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.19.1/js/mdb.min.js"></script>
</body>
</html>
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
Solve This Problem
- Material Design Buttons Website Template
- Material Design Gradient Button
- Material Buttons Design For Website
- Icon Button Material-ui
