css自学框架之图片及按钮（红色按钮、黄色按钮、蓝色按钮、绿色按钮、透明按钮）

一、图片

/* 图片 */
			img{max-width: 100%;vertical-align: middle;}

二、按钮（红色按钮、黄色按钮、蓝色按钮、绿色按钮、透明按钮）
效果如图：

css代码

/*按钮*/
			button{margin: 0;outline: 0;}			
			.btn{color: inherit;cursor: pointer;background: #fff;padding: .5em 1em;display: inline-block;border-radius: var(--radius);border: var(--border-width) solid var(--border-color);}
			.btn:hover{ color: var(--red) }			
			/* -- 按钮颜色 */
			.btn.red{color: var(--white); background-color: var(--red);}
			.btn.yellow{color: var(--white);background-color: var(--yellow);}
			.btn.blue{color: var(--white);background-color: var(--blue);}
			.btn.green{color: var(--white);background-color: var(--green);}
			.btn.transparent{ background-color: transparent }
			/*禁用的按钮*/
			.btn[disabled]{opacity: .5;cursor: not-allowed;}			
			/* -- 按钮尺寸 */
			.btn.small{ font-size: .5em }
			.btn.middle, .btn.large{ padding: .75em 1.5em }
			.btn.large{ font-size: 1.2em }		

html引用代码

<input class="btn" type="button" value="input 按钮"/>
		<button class="btn">button 按钮</button>
		<a class="btn">a 按钮</a><br>
		<button class="btn red">红色按钮</button>
		<button class="btn yellow">黄色按钮</button>
		<button class="btn blue">蓝色按钮</button>
		<button class="btn green">绿色按钮</button>
		<button class="btn transparent">透明按钮</button><br><br>
		<button class="btn yellow small">小按钮</button>
		<button class="btn yellow">一般按钮</button>
		<button class="btn yellow middle">中按钮</button>
		<button class="btn yellow large">大按钮</button><br>
		<button class="btn red" disabled>禁用的按钮</button>

给 a 元素、input 按钮元素或 button 元素添加 btn 类，即可让此元素变成一个按钮；给按钮添加 red，yellow，blue，green 类可以让按钮变成 红/黄/蓝/绿/透明 的颜色；给按钮添加 small 和 large 扩展类，可以使按钮变小和变大。