from:
https://codepen.io/airen/pen/OaVopb
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Button with Gradient Border</title>
<meta content="在党的群众路线教育实践活动工作会议上的讲话，涂聚文，Geovin Du，塗聚文，geovindu,捷为工作室" name="keywords">
<meta content="在党的群众路线教育实践活动工作会议上的讲话，涂聚文，Geovin Du，塗聚文，geovindu,捷为工作室" name="description">
<meta http-equiv="X-UA-Compatible" content="chrome =1" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<link rel="shortcut icon" href="~/favicon.ico" type="image/x-icon" />
<link rel="icon" href="/favicon.ico" />
<link rel="bookmark" href="/favicon.ico" type="image/gif" />
<meta name="author" content="Geovin Du 涂聚文，塗聚文，geovindu">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>
body {
width: 100vw;
height: 100vh;
padding: 2vh;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 290px;
height: 90px;
position: relative;
border-radius: 50px;
font-weight: 500;
border: solid 5px transparent;
color: #5e3700;
font-size: 32px;
margin: 20px;
}
.btn.btn-primary {
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.61);
box-shadow: inset 0 5px 15px 0 rgba(255, 255, 255, 0.4), inset 0 10px 15px 0 rgba(255, 255, 255, 0.6), 0 2px 12px rgba(0, 0, 0, 0.35);
background-image: radial-gradient(circle at 50% 0%, #fff000 50%, #ffcd00 100%), linear-gradient(101deg, #ffc46d, #fa0055);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.btn.btn-outline {
color: #fff;
border: 5px solid #ffffff;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.btn.btn-default {
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right, #ff7c2d 3%, #ff016e 97%), linear-gradient(to bottom, #fff3b6, #e27d2c);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.btn.btn-secondary {
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right, #ff005d 5%, #0066ff 98%), linear-gradient(to bottom, #fff3b6, #e27d2c);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.btn.btn-disabled {
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right, #D0D0D0 5%, #BBBBBB 98%), linear-gradient(to bottom, #fff3b6, #e27d2c);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.btn.btn-success {
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right, #ffc600 6%, #04e199 94%), linear-gradient(to bottom, #fff3b6, #e27d2c);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.btn.btn-info {
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right, #32A8FF 6%, #00CCB4 94%), linear-gradient(to bottom, #D696BC, #CD4F5D);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.btn.btn-circle {
min-width: 90px;
max-width: 90px;
height: 90px;
font-size: 24px;
color: #fff;
border-radius: 100%;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
flex-direction: column;
align-items: center;
justify-content: center;
background-image: linear-gradient(-151deg, #17FEF6 0%, #8417F9 100%), linear-gradient(to bottom, #fff3b6, #e27d2c);
background-origin: border-box;
background-clip: padding-box, border-box;
}
.btn.btn-circle span {
display: block;
text-align: center;
}
.btn.btn-group {
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
background-image: linear-gradient(to right, #17EDFE 6%, #8417F9 94%), linear-gradient(to bottom, #fff3b6, #e27d2c);
background-origin: border-box;
background-clip: padding-box, border-box;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body>
<div class="btn btn-default"></div>
<div class="btn btn-default"></div>
<div class="btn btn-circle"></div>
<div class="btn btn-success"></div>
<div class="btn btn-info"></div>
<div class="btn btn-group"></div>
</body>
</html>
