<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>搞代码-CSS垂直按钮组-CSS应用实例(gaodaima.com)</title>
<style>
.btn-group button {
background-color: #4CAF50; /* Green background */
border: 1px solid green; /* Green border */
color: white; /* White text */
padding: 10px 24px; /* Some padding */
cursor: pointer; /* Pointer/hand icon */
width: 50%; /* Set a width if needed */
display: block; /* Make the buttons appear below each other */
}
.btn-group button:not(:last-child) {
border-bottom: none; /* Prevent double borders */
}
/* Add a background color on hover */
.btn-group button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>垂直按钮组</h1>
<div class="btn-group">
<button>苹果</button>
<button>三星</button>
<button>索尼</button>
<button>搞代码</button>
</div>
</body>
</html>
本文案例为大家展示了《CSS垂直按钮组》的代码，若要看代码效果请大家点击“运行代码”按钮。
[code]<!DOCTYPE html> <html> <head> <meta charset=”utf-8″> <title>搞代码-CSS垂直按钮组-CSS应用实例(gaodaima.com)</title> <style> .btn-group button { background-color: #4CAF50; /* Green background */ border: 1px solid green; /* Green border */ color: white; /* White text */ padding: 10px 24px; /* Some padding */ cursor: pointer; /* Pointer/hand icon */ width: 50%; /* Set a width if needed */ display: block; /* Make the buttons appear below each other */ } .btn-group button:not(:last-child) { border-bottom: none; /* Prevent double borders */ } /* Add a background color on hover */ .btn-group button:hover { background-color: #3e8e41; } </style> </head> <body> <h1>垂直按钮组</h1> <div class=”btn-group”> <button>苹果</button> <button>三星</button> <button>索尼</button> <button>搞代码</button> </div> </body> </html>[/code]
转载请注明原文链接：CSS垂直按钮组-CSS应用实例
