CSS按钮组-CSS应用实例

<!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 */
    float: left; /* Float the buttons side by side */
}

/* Clear floats (clearfix hack) */
.btn-group:after {
    content: "";
    clear: both;
    display: table;
}

.btn-group button:not(:last-child) {
    border-right: none; /* Prevent double borders */
}

/* Add a background color on hover */
.btn-group button:hover {
    background-color: #3e8e41;
}
</style>
</head>
<body>
<h1>按钮组</h1>

<p>两个按钮组:</p>
<div class="btn-group" style="width:100%">
  <button style="width:50%">苹果</button>
  <button style="width:50%">索尼</button>
</div>

<p>三个按钮组:</p>
<div class="btn-group" style="width:100%">
  <button style="width:33.3%">苹果</button>
  <button style="width:33.3%">三星</button>
  <button style="width:33.3%">索尼</button>
</div>

<p>四个按钮组:</p>
<div class="btn-group" style="width:100%">
  <button style="width:25%">苹果</button>
  <button style="width:25%">三星</button>
  <button style="width:25%">索尼</button>
  <button style="width:25%">搞代码</button>
</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<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 */

float: left; /* Float the buttons side by side */

}

/* Clear floats (clearfix hack) */

.btn-group:after {

content: "";

clear: both;

display: table;

}

.btn-group button:not(:last-child) {

border-right: none; /* Prevent double borders */

}

/* Add a background color on hover */

.btn-group button:hover {

background-color: #3e8e41;

}

</style>

</head>

<body>

<p>两个按钮组:</p>

</div>

<p>三个按钮组:</p>

</div>

<p>四个按钮组:</p>

</div>

</body>

</html>

本文案例为大家展示了《CSS按钮组》的代码，若要看代码效果请大家点击“运行代码”按钮。

<!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 */ float: left; /* Float the buttons side by side */ } /* Clear floats (clearfix hack) */ .btn-group:after { content: ""; clear: both; display: table; } .btn-group button:not(:last-child) { border-right: none; /* Prevent double borders */ } /* Add a background color on hover */ .btn-group button:hover { background-color: #3e8e41; } </style> </head> <body> <h1>按钮组</h1> <p>两个按钮组:</p> <div class="btn-group" style="width:100%"> <button style="width:50%">苹果</button> <button style="width:50%">索尼</button> </div> <p>三个按钮组:</p> <div class="btn-group" style="width:100%"> <button style="width:33.3%">苹果</button> <button style="width:33.3%">三星</button> <button style="width:33.3%">索尼</button> </div> <p>四个按钮组:</p> <div class="btn-group" style="width:100%"> <button style="width:25%">苹果</button> <button style="width:25%">三星</button> <button style="width:25%">索尼</button> <button style="width:25%">搞代码</button> </div> </body> </html>

注意：如需评论后运行请重新刷新页面,谢谢您搞代码学习知识

原创文章，转载请注明： 转载自搞代码

本文链接地址: CSS按钮组-CSS应用实例

分享到： QQ好友微信 QQ空间新浪微博印象笔记轻笔记有道云笔记