CSS button
Basic button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: red;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
</style>
</head>
<body>
<button>默認按鈕</button>
<button class="button">按鈕</button>
</body>
</html>Button color
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */
.button4 {background-color: #e7e7e7; color: black;} /* Gray */
.button5 {background-color: #555555;} /* Black */
</style>
</head>
<body>
<button class="button">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>Button size:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: blue;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
</style>
</head>
<body>
<h2>按鈕大小</h2>
<p>我們可以使用 font-size 屬性來設置按鈕大小:</p>
<button class="button button1">10px</button>
<button class="button button2">12px</button>
<button class="button button3">16px</button>
<button class="button button4">20px</button>
<button class="button button5">24px</button>
</body>
</html>Button with rounded corners:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 12px;}
.button2 {border-radius: 44px;}
.button3 {border-radius: 28px;}
.button4 {border-radius: 32px;}
.button5 {border-radius: 50%;}
</style>
</head>
<body>
<h2>圓角按鈕</h2>
<p>我們可以使用 border-radius 屬性來設置圓角按鈕:</p>
<button class="button button1">2px</button>
<button class="button button2">4px</button>
<button class="button button3">8px</button>
<button class="button button4">12px</button>
<button class="button button5">50%</button>
</body>
</html>Button with border color:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
background-color: black;
color: black;
border: 2px solid pink;
}
.button2 {
background-color: black;
color: black;
border: 2px solid #008CBA;
}
.button3 {
background-color: black;
color: black;
border: 2px solid #f44336;
}
.button4 {
background-color: black;
color: black;
border: 2px solid #e7e7e7;
}
.button5 {
background-color: black;
color: black;
border: 2px solid yellow;
}
</style>
</head>
<body>
<h2>按鈕邊框顏色</h2>
<p>我們可以使用 border 屬性設置按鈕邊框顏色:</p>
<button class="button button1">pink</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">yellow</button>
</body>
</html>Mouseover button
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 16px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50;
}
.button1:hover {
background-color: #4CAF50;
color: white;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
.button3 {
background-color: white;
color: black;
border: 2px solid #f44336;
}
.button3:hover {
background-color: #f44336;
color: white;
}
.button4 {
background-color: white;
color: black;
border: 2px solid #e7e7e7;
}
.button4:hover {background-color: #e7e7e7;}
.button5 {
background-color: white;
color: black;
border: 2px solid #555555;
}
.button5:hover {
background-color: #555555;
color: white;
}
</style>
</head>
<body>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>Shaded buttons:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: pink;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
</head>
<body>
<button class="button button1">陰影按鈕</button>
<button class="button button2">鼠標懸停后出現(xiàn)陰影</button>
</body>
</html>Forbidden buttons:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: gray;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
</style>
</head>
<body>
<button class="button">正常按鈕</button>
<button class="button disabled">禁用按鈕</button>
</body>
</html>Set the width of the button:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: black;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {
padding-left: 0;
padding-right: 0;
width: 100%;
}
</style>
</head>
<body>
<button class="button button1">200px</button><br>
<button class="button button2">50%</button><br>
<button class="button button3">100%</button>
</body>
</html>Button group:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
.button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<p style="clear:both"><br>記住要清除浮動，否則下一個 p 元素的按鈕也會顯示在同一行。</p>
</body>
</html>Button group with border:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
.button {
background-color: blue;
border: 3px solid red;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
float: left;
}
.button:hover {
background-color: #3e8e41;
}
</style>
</head>
<body>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
<button class="button">Button</button>
</body>
</html>Button Animation:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
section > div {
display: inline-block;
position: relative;
width: 200px;
height: 200px;
margin: 0px auto;
/*對于正方形元素border-radius設置為50%剛好變成圓形*/
border-radius: 50%;
/*寬度為10px的、不透明度為0.7的黑色邊框效果*/
border: 10px solid hsla(0,0%,0%,.7);
/*通過邊框陰影實現(xiàn)立體按鈕效果，inset是內(nèi)陰影效果*/
box-shadow: inset 0 15px 15px -5px hsla(0,0%,100%,.7),
inset 0 -5px 10px 3px hsla(0,0%,0%,.6),
0 8px 10px 2px hsla(0,0%,0%,.3);
background-position: center;
/*初始縮放0.66倍*/
transform: scale(.66);
/*在失去焦點時根據(jù)自定義的貝塞爾時間曲線做動畫變換效果*/
transition: transform .5s cubic-bezier(.32,0,.15,1);
}
section > div:hover {
cursor: none;
/*懸停時恢復原始大小*/
transform: scale(1);
/*鼠標懸停時根據(jù)自定義的貝塞爾時間曲線做動畫變換效果*/
transition: transform .2s cubic-bezier(.32,0,.15,1);
}
</style>
</head>
<body>
<section>
<div class="particle"></div>
<div class="cells"></div>
<div class="jelly"></div>
<div class="blobbs"></div>
<div class="chase"></div>
</section>
</body>
</html>
