css简约立体按钮播放相关按钮效果代码
代码语言:html
所属分类:布局界面
代码描述:css简约立体按钮播放相关按钮效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <style> button { position:relative; display:inline-block; background:0; outline:0; border:0; padding:0; cursor:pointer; color:#eee; text-transform:uppercase; font-weight:700; letter-spacing:.05em } button span { position:relative; z-index:1; display:block; min-width:1em; padding:1em; border-radius:2em; background-color:#d99d61; border:1px solid #d4904c; box-shadow:-5px 5px 10px rgba(0,0,0,0.2); transition:transform .1s,box-shadow .2s,background-color .2s } button::after { content:""; position:absolute; top:-1em; bottom:-1em; left:-1em; right:-1em; border-radius:4em; box-shadow:0 0 0 rgba(0,0,0,0.2),inset 0 0 0 rgba(0,0,0,0.2); transition:box-shadow .1s } button:hover span,button:focus span { background-color:#dca56d } button:active span { background-color:#d99d61; transform:scale(0.97); box.........完整代码请登录后点击上方下载按钮下载查看
网友评论0