css布局实现发光按钮动画效果代码
代码语言:html
所属分类:布局界面
代码描述:css布局实现发光按钮动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css?family=Space%20Grotesk:700|Space%20Grotesk:400'); :root { /* change this for scaling */ --m: 4rem; --red: #FF6565; --pink: #FF64F9; --purple: #6B5FFF; --blue: #4D8AFF; --green: #5BFF89; --yellow: #FFEE55; --orange: #FF6D1B; } body { background-color: #141516; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; margin: 0; } button { border: calc(0.08 * var(--m)) solid transparent; position: relative; color: #F3F3F3; font-family: 'Space Grotesk'; font-size: var(--m); border-radius: calc(0.7 * var(--m)); padding: calc(0.5 * var(--m)) calc(1 * var(--m)); display: flex; justify-content: center; cursor: pointer; background:linear-gradient(#121213, #121213), linear-gradient(#121213 50%, rgba(18, 18, 19, 0.6) 80%, rgba(18, 18, 19, 0).........完整代码请登录后点击上方下载按钮下载查看
网友评论0