CSS: Button with Gradient Border

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>

　

 

 

　

 

posted @ 2024-01-07 16:18  ®Geovin Du Dream Park™  阅读(15)  评论(0)    收藏  举报