css实现渐变边框按钮效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现渐变边框按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> /* vars */ button { --border-width: 2px; --border-radius: 22px; --color-1: #f19f39; --color-2: #de222c; } /* code */ button { font-weight: bold; letter-spacing: 1px; color: #ddd; width: 120px; position: relative; background: linear-gradient(to right, orange, red), linear-gradient(to right, orange, red); background-position: var(--border-radius) 0, var(--border-radius) 100%; background-repeat: no-repeat; background-size: calc(100% - var(--border-radius) - var(--border-radius)) var(--border-width); padding: 14px 24px; border-radius: var(--border-radius); border: none; } button:before, button:after { content: &q.........完整代码请登录后点击上方下载按钮下载查看
网友评论0