CSSボタン

基本ボタン

<!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>

ボタンの色

<!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>

ボタンのサイズ:

<!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>

角が丸いボタン:

<!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>

ボーダー付き色付きボタン:

<!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>

マウスオーバーボタン

<!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>

網掛けボタン:

<!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>

禁止ボタン:

<!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>

設定ボタン幅:

<!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>

ボタングループ:

<!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>

枠線付きボタングループ:

<!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>

ボタンアニメーション:

<!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>

学び続ける

新しいファイル

<!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>

提出するリセットコード

自動運転