svg实现可爱立体按钮按下效果代码
代码语言:html
所属分类:布局界面
代码描述:svg实现可爱立体按钮按下效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Cherry+Bomb+One&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Patrick+Hand&family=Playpen+Sans:wght@100..800&display=swap" rel="stylesheet"> <style> body { background: #68d36c; display: flex; align-items: center; justify-content: center; height: 100vh; } .wobbly-button { position: relative; display: inline-block; padding: 10px 30px; font-family: sans-serif; font-weight: bold; font-size: 8cqw; padding: 6cqw; color: #4f1f0b; z-index: 1; cursor: pointer; transition: all .3s ease; &:hover { transform: translateY(3cqw); } &:hover:before { box-shadow: 0 0 0px 0 #331407; } } .wobbly-text { font-family: "Patrick Hand", cursive; font-family: "Playpen Sans", system-ui; font-family: "Cherry Bomb One", system-ui; letter-spacing: 0.5cqw; font-weight: 700; text-shadow: inset 5px 5px #fff; /* filter: url('#watercolor'); */ /* filter: url('#wobbly'); */ } .wobbly-button::before { content: ""; position: absolute; inset.........完整代码请登录后点击上方下载按钮下载查看
网友评论0