css实现按钮长阴影三维立体效果代码
代码语言:html
所属分类:布局界面
代码描述:css实现按钮长阴影三维立体效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> button { --border: 5px; /* the border width */ --color: #37E8FC; /* the color */ font-size: 35px; padding: 0.25em 1.2em; cursor: pointer; border: none; font-weight: bold; color: var(--color); box-shadow: 0 0 0 200px inset var(--c,#0000), 0 0 0 var(--border) inset var(--color); background: linear-gradient(var(--color) 0 0) bottom/100% 0% no-repeat; transition: color var(--t,0.3s), background-size 0.3s; position: relative; } button:before, button:after { content: ""; position: absolute; inset: 0; pointer-events: none; clip-path: polygon(0 0,100% 0,calc(100% + 200vmax) 200vmax,200vmax calc(100% + 200vmax),0 100%); box-shadow: 0 0 0 200vmax var(--color); filter.........完整代码请登录后点击上方下载按钮下载查看
网友评论0