butang CSS
Butang asas
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Warna butang
<!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>Saiz butang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Butang dengan bucu bulat:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Butang dengan warna jidar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Butang tetikus
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Butang berlorek:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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">鼠标悬停后出现阴影</button>
</body>
</html>Butang terlarang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Tetapkan lebar butang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Kumpulan butang:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>Kumpulan butang dengan jidar:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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>butang Animasi:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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);
/*通过边框阴影实现立体按钮效果，inset是内阴影效果*/
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);
/*在失去焦点时根据自定义的贝塞尔时间曲线做动画变换效果*/
transition: transform .5s cubic-bezier(.32,0,.15,1);
}
section > div:hover {
cursor: none;
/*悬停时恢复原始大小*/
transform: scale(1);
/*鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果*/
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>
fail baharu
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文网(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);
/*通过边框阴影实现立体按钮效果，inset是内阴影效果*/
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);
/*在失去焦点时根据自定义的贝塞尔时间曲线做动画变换效果*/
transition: transform .5s cubic-bezier(.32,0,.15,1);
}
section > div:hover {
cursor: none;
/*悬停时恢复原始大小*/
transform: scale(1);
/*鼠标悬停时根据自定义的贝塞尔时间曲线做动画变换效果*/
transition: transform .2s cubic-bezier(.32,0,.15,1);
}
</style>
</head>
<body>
<section>
<div class="particle" style="background-color:red;"></div>
<div class="cells" style="background-color:blue;"></div>
<div class="jelly" style="background-color:yellow;"></div>
<div class="blobbs" style="background-color:pink;"></div>
<div class="chase" style="background-color:gray;"></div>
</section>
</body>
</html>
Pratonton
Clear
- Cadangan kursus
- Muat turun perisian kursus
Perisian kursus tidak tersedia untuk dimuat turun pada masa ini. Kakitangan sedang menganjurkannya. Sila beri perhatian lebih kepada kursus ini pada masa hadapan~
Pelajar yang telah menonton kursus ini juga sedang belajar
Mari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP
Pengenalan pantas kepada pembangunan bahagian hadapan web
Pembangunan Tianlongbabu praktikal skala besar bagi rangka kerja MVC versi Mini meniru laman web ensiklopedia perkara yang memalukan
Bermula dengan Pembangunan Praktikal PHP: Penciptaan PHP Pantas [Forum Perniagaan Kecil]
Pengesahan log masuk dan papan mesej klasik
Pengumpulan pengetahuan rangkaian komputer
Mula Pantas Node.JS Versi Penuh
Kursus bahagian hadapan yang paling memahami anda: HTML5/CSS3/ES6/NPM/Vue/...[Asal]
Tulis rangka kerja PHP MVC anda sendiri (40 bab secara mendalam/butiran besar/mesti dibaca untuk pemula untuk maju)