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>
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)