js+css实现一个三维的暂停按钮点击效果代码
代码语言:html
所属分类:表单美化
代码描述:js+css实现一个三维的暂停按钮点击效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> *, *:after, *:before { box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; background-image: linear-gradient(to bottom, #dee9da, #c6cfc7); } button { -webkit-tap-highlight-color: transparent; position: relative; border: 0; width: 200px; height: 200px; border-radius: 50%; background-color: #d0d7cd; box-shadow: inset 0 10px 20px 0 rgba(51, 51, 51, 0.375), 0 2px 0 0 rgba(255, 255, 255, 0.25); transition: 0.5s ease; cursor: pointer; } button:before { position: absolute; content: ""; display: block; border-radius: 50%; width: 70%; height: 70%; top: 15%; left: 15%; background-image: linear-gradient(to bottom, #e7f2e1, #afb0aa); box-shadow: 0 15px 20px 0 rgba(51, 51, 51, 0.375), inset 0 -3px 0 0 rgba(51, 51, 51, 0.125); transition: 0.5s ease; } button:after { position: absolute; content: ""; display: block; border-radius: 50%; width: 40%; height: 40%; top: 30%; left: 30%; background-image: linear-gradient(to bottom, #d6ded1, #e1ebdb); box-shadow: inset 0 -3px 0 0 rgba(238, 238, 238, 0.75), inset 0 3px 0 0 rgba(51, 51, 51, 0.1); } button span { display: block; position: absolute; top: 50%; left: 50%; transition: 0.25s ease; z-index: 1; } button span:before, button span:after { pos.........完整代码请登录后点击上方下载按钮下载查看
网友评论0