css实现按钮悬浮发光效果代码
代码语言:html
所属分类:悬停
代码描述:css实现按钮悬浮发光效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); :root { /* violet */ --primary-color: 111, 76, 255; /* white */ --text-color: 256, 256, 256; } body{ margin: 0; padding: 0; height: 100vh; background-color: #07050f; font-family: 'Poppins', sans-serif; color: white; padding: 1rem; text-align: center; } .glow{ height: 100%; width: 100%; --second-gradient-coords: 110% 67%; --first-gradient-coords: -8% 32%; background-image: radial-gradient(circle closest-corner at var(--first-gradient-coords),rgba(40,72,122,0.85),transparent), radial-gradient(circle closest-corner at var(--second-gradient-coords),rgba(138,41,129,0.7),transparent); } .text-glow { text-shadow: 0 0 80px rgb(192 219 255 / 75%), 0 0 32px rgb(65 120 255 / 24%); } .text-gradient { background: linear-gradient(to right, #30CFD0, #c43ad6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .btn { font-size: 18px; padding: 12px 32px; margin: 1rem; cursor: pointer; border-radius: 4px; transition: all 0.3s ease; border-radius: 50px; transition: all 0.3s ease; } .btn:hover { transition: all 0.3s ease; } .btn-glow:hover { box-shadow: rgba(var(--primary-color), 0.5) 0px 0px 20px 0px; } .btn-primary { background-color: rgb(var(--primary-color)); border: 1px solid rgb(var(--primary-color)); color: rgb(var(--text-color)); } .btn-semi-transp.........完整代码请登录后点击上方下载按钮下载查看
网友评论0