liang14658fox

Appearance

1. 普通按钮 ​

html
<button>按钮</button>
<button>按钮</button>

2. 边框样式 ​

css
p {
  border: 5px solid red;
}
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
p {
  border: 5px solid red;
}
p {
  border-left: 6px solid red;
  background-color: lightgrey;
}
css
/* 四个值 */
p {
  border-style: dotted solid double dashed; /* [上]  [右]  [下]  [左] */
}
/* 三个值 */
p {
  border-style: dotted solid double; /* [上]  [左右]  [下] */
}
/* 两个值 */
p {
  border-style: dotted solid; /* [上下]  [左右] */
}
/* 一个值 */
p {
  border-style: dotted; /* 虚线 */
}
/* 四个值 */
p {
  border-style: dotted solid double dashed; /* [上]  [右]  [下]  [左] */
}
/* 三个值 */
p {
  border-style: dotted solid double; /* [上]  [左右]  [下] */
}
/* 两个值 */
p {
  border-style: dotted solid; /* [上下]  [左右] */
}
/* 一个值 */
p {
  border-style: dotted; /* 虚线 */
}

3. 按钮升级 ​

  • 基础效果
css
.buttonStyle {
    text-decoration: underline; /* 按钮内文字下划线 */
}
.buttonStyle {
    text-decoration: underline; /* 按钮内文字下划线 */
}
  • 悬停背景颜色变淡
css
.buttonStyle {
	transition: opacity .3s; /* 悬停时透明度颜色渐变速度 */
}

.buttonStyle:hover {
	opacity: .75
}
.buttonStyle {
	transition: opacity .3s; /* 悬停时透明度颜色渐变速度 */
}

.buttonStyle:hover {
	opacity: .75
}
  • 按下下沉效果
css
.buttonStyle {
	transition: .3s;   /* 按下时下沉速度 */
}

/* 按钮按下缩放效果 */
.buttonStyle:active {
	position: relative;
	top: 1px;
	transform: scale(0.99, 0.99);
	-webkit-transform: scale(0.99, 0.99);
	-o-transform: scale(0.99, 0.99);
	-ms-transform: scale(0.99, 0.99);
}
.buttonStyle {
	transition: .3s;   /* 按下时下沉速度 */
}

/* 按钮按下缩放效果 */
.buttonStyle:active {
	position: relative;
	top: 1px;
	transform: scale(0.99, 0.99);
	-webkit-transform: scale(0.99, 0.99);
	-o-transform: scale(0.99, 0.99);
	-ms-transform: scale(0.99, 0.99);
}