div+css实现立体质感按键悬浮凸出效果代码
代码语言:html
所属分类:悬停
代码描述:div+css实现立体质感按键悬浮凸出效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> body { background: rgb(214, 214, 214); background: linear-gradient( 115deg, rgba(214, 214, 214, 1) 0%, rgba(234, 234, 234, 1) 100% ); } .box { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) skew(15deg); width: 250px; height: 250px; } .box .container { width: 250px; height: 250px; background: #2f0000; border-radius: 15px; border: 10px solid #cbcdcd; display: flex; flex-wrap: wrap; gap: 0.5px; } .box .container .button { position: relative; flex-basis: calc(50% - 0.5px); background: #ca0a0b; border: 0; font-size: 35px; border-radius: 5px; color: white; cursor: pointer; transition: all 0.5s ease; } .box .container .button::before { content: ""; position: absolute; width: 94px; height: 94px; border-radius: 100%; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgb(229, 136, 137); background: linear-gradient( 133deg, rgba(229, 136, 137, 1) 0%, rgba(229, 136, 137, 1) 15%, rgba(209, 13, 12, 1) 20%, rgba(209, 13, 12, 1) 65%, rgba(97, 4, 3, 1) 100% ); } .box .container .button::after { content: ""; position: absolute; width: 102%; height: 0; background: rgb(80, 8, 8); background: linear-gradient( 90deg, #4c0405 1%, rgb(202, 10, 11) 5%, rgb(199, 39, 39) 45%, #d88180 100% ); left: -8px; bottom: 0; transform: skewY(0deg) skewX(-40deg); z-index: -4; transition: all 0.5s ease; } .box .container .button:hover::after { height: 12px; bottom: -10px; } .box .container .button span { position: absolute; z-index: 1; left: 50%; top: 50%; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0