4组炫酷按钮点击切换效果
代码语言:html
所属分类:选项卡
代码描述:4组炫酷按钮点击切换效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/bootstrap.3.3.4.css" /> <link type="text/css" rel="stylesheet" href="http://repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css"> <title> - Button Groups;</title> <style> * { margin: 0; padding: 0; font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 100; } .button-group { margin: 100px auto; width: 600px; margin-bottom: 30px; } .button-group h3 { color: #999; text-align: center; font-size: 16px; margin-bottom: 10px; } .button-group#redBlack .button { background: linear-gradient(135deg, #292929, #191919); border: none; width: 120px; height: 120px; padding: 20px; display: inline-block; margin: -4px; color: #F2070B; font-size: 14px; text-align: left; text-shadow: 0 0 10px rgba(181, 26, 30, 0.4); box-shadow: 0px 10px 30px rgba(28, 28, 28, 0.9); } .button-group#redBlack .button span { text-align: center; margin: 20px 0 20px 0; display: block; color: #fff; font-size: 32px; text-shadow: none; } .button-group#redBlack .button:hover { background: linear-gradient(-45deg, #292929, #191919); } .button-group#redBlack .button.active { background: #B51A1E; color: #fff; box-shadow: inset 0px 0px 30px rgba(28, 28, 28, 0.9); } .button-group#orange .button { background: #F25824; width: 120px; height: 120px; padding: 20px; display: inline-block; margin: 0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0