CSS 按钮 - Break易站

2022-09-18 11:11:32

[

.w3-ripple{

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;

}

.w3-btn {

position: relative;

}

.w3-btn, .w3-btn:link, .w3-btn:visited {

color: #FFFFFF;

background-color: #73AD21;

background-color: #4CAF50;

box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);

}

.btn {

background-color: #4CAF50;

border: none;

color: #FFFFFF;

padding: 15px 32px;

text-align: center;

-webkit-transition-duration: 0.4s; /* Safari */

transition-duration: 0.4s;

margin: 16px 0 !important;

text-decoration: none;

font-size:16px;

}

.btn1 {background-color: #4CAF50;} /* Green */

.btn2 {background-color: #008CBA;} /* Blue */

.btn3 {background-color: #f44336;} /* Red */

.btn4 {background-color: #e7e7e7;color:black;} /* Grey */

.btn5 {background-color: #555555;} /* Orange */

.btn1:hover {background-color: #4CAF50;}

.btn2:hover {background-color: #008CBA;}

.btn3:hover {background-color: #f44336;}

.btn4:hover {background-color: #e7e7e7;color:black;}

.btn5:hover {background-color: #555555;}

.font1 {font-size:10px;}

.font2 {font-size:12px;}

.font3 {font-size:16px;}

.font4 {font-size:20px;}

.font5 {font-size:24px;}

.round1 {border-radius:2px}

.round2 {border-radius:4px}

.round3 {border-radius:8px}

.round4 {border-radius:12px}

.round5 {border-radius:50%}

.width1 {width: 250px}

.width2 {width: 50%}

.width3 {width: 100%}

.border1 {border-radius:3px;background-color:white;color:black;border:2px solid #4CAF50;}

.border2 {border-radius:3px;background-color:white;color:black;border:2px solid #008CBA;}

.border3 {border-radius:3px;background-color:white;color:black;border:2px solid #f44336;}

.border4 {border-radius:3px;background-color:white;color:black;border:2px solid #e7e7e7;}

.border5 {border-radius:3px;background-color:white;color:black;border:2px solid #555555;}

.border11:hover {background-color:#4CAF50;color:white;}

.border22:hover {background-color:#008CBA;color:white;}

.border33:hover {background-color:#f44336;color:white;}

.border44:hover {background-color:#e7e7e7;}

.border55:hover {background-color:#555555;color:white;}

.border111{border-radius:3px;background-color:#4CAF50;color:white;}

.border222{border-radius:3px;background-color:#008CBA;color:white;}

.border333 {border-radius:3px;background-color:#f44336;color:white;}

.border444 {border-radius:3px;background-color:#e7e7e7;}

.border555 {border-radius:3px;background-color:#555555;color:white;}

.border111:hover {background-color:white;color:black;border:2px solid #4CAF50;}

.border222:hover {background-color:white;color:black;border:2px solid #008CBA;}

.border333:hover {background-color:white;color:black;border:2px solid #f44336;}

.border444:hover {background-color:white;color:black;border:2px solid #e7e7e7;}

.border555:hover {background-color:white;color:black;border:2px solid #555555;}

.shadow1{box-shadow:0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important}

.shadow2:hover{box-shadow:0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19) !important}

.disabled{cursor: not-allowed;opacity: 0.6;}

.button {

display: inline-block;

border-radius: 4px;

background-color: #f4511e;

border: none;

color: #FFFFFF;

text-align: center;

font-size: 28px;

padding: 20px;

width: 180px;

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;

}

.pressed {

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;

}

.pressed:hover {background-color: #3e8e41}

.w3-ripple: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

}

.w3-ripple:active:after {

padding: 0;

margin: 0;

opacity: 1;

transition: 0s

}

.pressed:active {

background-color: #3e8e41;

box-shadow: 0 5px #666;

transform: translateY(4px);

}

.float {

margin: 0 !important;

float: left;

transition: none;

}

.float:hover {

background-color: #3e8e41;

}

CSS 按钮
本章节我们为大家介绍使用 CSS 来制作按钮。

基本按钮样式

默认按钮 CSS 按钮

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;

	}

按钮颜色

Green
Blue
Red
Gray
Black
我们可以使用 background-color 属性来设置按钮颜色:

CSS 实例


	.button1 {background-color: #4CAF50;} /* Green */.button2 

	{background-color: #008CBA;} /* Blue */.button3 {background-color: 

	#f44336;} /* Red */ 

	.button4 {background-color: #e7e7e7; color: black;} /* Gray */ .button5 

	{background-color: #555555;} /* Black */

按钮大小

10px
12px
16px
20px
24px
我们可以使用 font-size 属性来设置按钮大小:

CSS 实例


	.button1 {font-size: 10px;}.button2 {font-size: 12px;}.button3 

	{font-size: 16px;}

	.button4 {font-size: 20px;}.button5 {font-size: 24px;}

圆角按钮

2px
4px
8px
12px
50%
我们可以使用 border-radius 属性来设置圆角按钮:

CSS 实例


	.button1 {border-radius: 2px;}.button2 {border-radius: 4px;}.button3 

	{border-radius: 8px;}

	.button4 {border-radius: 12px;}.button5 {border-radius: 50%;}

按钮边框颜色

绿
蓝
红
灰
黑
我们可以使用 border 属性设置按钮边框颜色:

CSS 实例


	.button1 {??? background-color: white;??? color: black;??? 

	border: 2px solid #4CAF50; /* Green */}...

鼠标悬停按钮

绿
蓝
红
灰
黑

绿
蓝
红
灰
黑
我们可以使用 :hover 选择器来修改鼠标悬停在按钮上的样式。
提示: 我们可以使用 transition-duration 属性来设置 "hover" 效果的速度:

CSS 实例


	.button {??? -webkit-transition-duration: 0.4s; /* Safari */??? 

	transition-duration: 0.4s;}.button:hover {??? 

	background-color: #4CAF50; /* Green */??? color: white;}...

按钮阴影

阴影按钮
鼠标悬停后显示阴影
我们可以使用 box-shadow 属性来为按钮添加阴影:

CSS 实例


	.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" 来设置一个禁用的图片:

CSS 实例


	.disabled {??? opacity: 0.6;??? cursor: not-allowed;}

按钮宽度

250px
50%
100%
默认情况下，按钮的大小有按钮上的文本内容决定( 根据文本内容匹配长度 )。我们可以使用 width 属性来设置按钮的宽度:
提示: 如果要设置固定宽度可以使用像素 (px) 为单位，如果要设置响应式的按钮可以设置为百分比。

CSS 实例


	.button1 {width: 250px;}.button2 {width: 50%;}.button3 {width: 

	100%;}

按钮组

Button
Button
Button
Button
移除外边距并添加 float:left 来设置按钮组:

CSS 实例


	.button {??? float: left;}

带边框按钮组

Button
Button
Button
Button
我们可以使用 border 属性来设置带边框的按钮组:

CSS 实例


	.button {??? float: left;??? border: 1px 

	solid green}

按钮动画

CSS 实例

鼠标移动到按钮上后添加箭头标记:

Hover

CSS 实例

点击时添加 "波纹" 效果:



Click

CSS 实例

点击时添加 "压下" 效果:



Click

]

??本文标题：CSS 按钮 - Break易站

转载请保留页面地址：https://www.breakyizhan.com/css/17795.html

CSS 按钮 - Break易站

码农公寓

基本按钮样式

CSS 实例

按钮颜色

CSS 实例

按钮大小

CSS 实例

圆角按钮

CSS 实例

按钮边框颜色

CSS 实例

鼠标悬停按钮

CSS 实例

按钮阴影

CSS 实例

禁用按钮

CSS 实例

按钮宽度

CSS 实例

按钮组

CSS 实例

带边框按钮组

CSS 实例

按钮动画

CSS 实例

CSS 实例

CSS 实例

相关文章