最新站群系统,做笑话网站,分销网络设计案例,微信网站开发需要什么知识CSS 按钮本章节我们为大家介绍使用 CSS 来制作按钮。我们先看一下默认按钮和用css制作的按钮htmlphp中文网(php.cn).button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;fo…CSS 按钮本章节我们为大家介绍使用 CSS 来制作按钮。我们先看一下默认按钮和用css制作的按钮htmlphp中文网(php.cn).button {background-color: #4CAF50;border: none;color: white;padding: 15px 32px;text-align: center;text-decoration: none;display: inline-block;font-size: 16px;margin: 4px 2px;cursor: pointer;}CSS 按钮默认按钮链接按钮按钮运行程序看一下按钮颜色我们可以使用 background-color 属性来设置按钮颜色:实例htmlphp中文网(php.cn).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 */按钮颜色我们可以使用 background-color 属性来设置按钮颜色:GreenBlueRedGrayBlack运行程序看一下按钮大小我们可以使用 font-size 属性来设置按钮大小:实例htmlphp中文网(php.cn).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 {font-size: 10px;}.button2 {font-size: 12px;}.button3 {font-size: 16px;}.button4 {font-size: 20px;}.button5 {font-size: 24px;}按钮大小我们可以使用 font-size 属性来设置按钮大小:10px12px16px20px24px运行程序看一下圆角按钮我们可以使用 border-radius 属性来设置圆角按钮:htmlphp中文网(php.cn).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: 2px;}.button2 {border-radius: 4px;}.button3 {border-radius: 8px;}.button4 {border-radius: 12px;}.button5 {border-radius: 50%;}圆角按钮我们可以使用 border-radius 属性来设置圆角按钮:2px4px8px12px50%运行程序看一下按钮边框颜色我们可以使用 border 属性设置按钮边框颜色:htmlphp中文网(php.cn).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 {background-color: white;color: black;border: 2px solid #4CAF50;}.button2 {background-color: white;color: black;border: 2px solid #008CBA;}.button3 {background-color: white;color: black;border: 2px solid #f44336;}.button4 {background-color: white;color: black;border: 2px solid #e7e7e7;}.button5 {background-color: white;color: black;border: 2px solid #555555;}按钮边框颜色我们可以使用 border 属性设置按钮边框颜色:GreenBlueRedGrayBlack运行程序看一下鼠标悬停按钮我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。提示: 我们可以使用 transition-duration 属性来设置 hover 效果的速度:htmlphp中文网(php.cn).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;}鼠标悬停按钮GreenBlueRedGrayBlack运行程序看一下按钮阴影阴影按钮 鼠标悬停后显示阴影我们可以使用 box-shadow 属性来为按钮添加阴影:htmlphp中文网(php.cn).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;-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);}按钮阴影阴影按钮鼠标悬停后出现阴影运行程序看一下禁用按钮我们可以使用 opacity 属性为按钮添加透明度 (看起来类似 disabled 属性效果)。提示: 我么可以添加 cursor 属性并设置为 not-allowed 来设置一个禁用的图片:htmlphp中文网(php.cn).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;}.disabled {opacity: 0.6;cursor: not-allowed;}禁用按钮正常按钮禁用按钮运行程序看一下按钮宽度默认情况下按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。 我们可以使用 width 属性来设置按钮的宽度:提示: 如果要设置固定宽度可以使用像素 (px) 为单位如果要设置响应式的按钮可以设置为百分比。htmlphp中文网(php.cn).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 {width: 250px;}.button2 {width: 50%;}.button3 {padding-left: 0;padding-right: 0;width: 100%;}按钮宽度250px50%100%运行程序看一下按钮组移除外边距并添加 float:left 来设置按钮组:htmlphp中文网(php.cn).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;}按钮组移除外边距并添加 float:left 来设置按钮组:ButtonButtonButtonButton记住要清除浮动否则下一个 p 元素的按钮也会显示在同一行。运行程序看一下带边框按钮组我们可以使用 border 属性来设置带边框的按钮组:htmlphp中文网(php.cn).button {background-color: #4CAF50; /* Green */border: 1px solid green;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;}带边框按钮组Add borders to create a bordered button group:ButtonButtonButtonButton记住要清除浮动否则下一个 p 元素的按钮也会显示在同一行。运行程序看一下按钮动画鼠标移动到按钮上后添加箭头标记:htmlphp中文网(php.cn).button {display: inline-block;border-radius: 4px;background-color: #f4511e;border: none;color: #FFFFFF;text-align: center;font-size: 28px;padding: 20px;width: 200px;transition: all 0.5s;cursor: pointer;margin: 5px;}.button span {cursor: pointer;display: inline-block;position: relative;transition: 0.5s;}.button span:after {content: »;position: absolute;opacity: 0;top: 0;right: -20px;transition: 0.5s;}.button:hover span {padding-right: 25px;}.button:hover span:after {opacity: 1;right: 0;}按钮动画Hover 运行程序看一下点击时添加 波纹 效果:htmlphp中文网(php.cn).button {position: relative;background-color: #4CAF50;border: none;font-size: 28px;color: #FFFFFF;padding: 20px;width: 200px;text-align: center;-webkit-transition-duration: 0.4s; /* Safari */transition-duration: 0.4s;text-decoration: none;overflow: hidden;cursor: pointer;}.button:after {content: ;background: #90EE90;display: block;position: absolute;padding-top: 300%;padding-left: 350%;margin-left: -20px!important;margin-top: -120%;opacity: 0;transition: all 0.8s}.button:active:after {padding: 0;margin: 0;opacity: 1;transition: 0s}按钮动画 - 波纹效果Click Me运行程序看一下点击时添加 压下 效果:htmlphp中文网(php.cn).button {display: inline-block;padding: 15px 25px;font-size: 24px;cursor: pointer;text-align: center;text-decoration: none;outline: none;color: #fff;background-color: #4CAF50;border: none;border-radius: 15px;box-shadow: 0 9px #999;}.button:hover {background-color: #3e8e41}.button:active {background-color: #3e8e41;box-shadow: 0 5px #666;transform: translateY(4px);}按钮动画 - 按压效果Click Me运行程序看一下
