带互动位移放大镜效果的按钮代码
代码语言:html
所属分类:表单美化
代码描述:带互动位移放大镜效果的按钮代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Varela+Round&display=swap'> <style> .button { --light: #fff; --dark: #414856; --border: #C3C8DE; --background: #4F29F0; display: flex; align-items: center; justify-content: center; position: relative; border: 0; padding: 0 30px; width: auto; height: 60px; border-radius: 2px; border: 1px solid var(--border); background: none; color: var(--dark); cursor: pointer; outline: none; box-shadow: 0 10px 30px rgba(65, 72, 86, 0.1); transition: transform 0.1s linear, color 0.1s linear, background 0.15s linear; cursor: none; } .button > span { display: inline-block; position: relative; z-index: 2; font: 400 16px "Varela Round", sans-serif; transition: transform 0.15s linear; } .button.fill { border: 0; color: var(--light); background: var(--background); } .cursor { --cursor: #C3C8DE; position: fixed; top: -50px; z-index: 99; width: 40px; height: 40px; border-radius: 50%; background: none; border: solid 2px var(--cursor); pointer-events: none; transition: transform 0.3s ease, background 0.3s ease, border-color 0.3s ease; } [cursor=link]:hover ~ .cursor { mix-blend-mode: difference; transform: scale(1.5); cursor: none; background: #fff; border-color: #fff; } body { background: #E8EBF3; height: 100vh; font: 400 16px "Varela Round", sans-serif; display: flex; justify-content: center; align-items: center; } body .button { margin: 0 10px; } body .socials { position: fixed; display: block; left: 20px; bottom: 20px; } body .socials > a { display: block; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0