分享几个精美的网页按钮样式，纯CSS实现，无JS（拿来即用）

Z_B_L

于 2023-10-24 11:22:35 发布

阅读量278

点赞数 6

文章标签： 1024程序员节

本文链接：https://blog.csdn.net/Z_B_L/article/details/134007385

版权

点击按钮：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			button {
			 position: relative;
			 display: inline-block;
			 cursor: pointer;
			 outline: none;
			 border: 0;
			 vertical-align: middle;
			 text-decoration: none;
			 font-family: inherit;
			 font-size: 15px;
			}
			
			button.learn-more {
			 font-weight: 600;
			 color: #382b22;
			 text-transform: uppercase;
			 padding: 1.25em 2em;
			 background: #fff0f0;
			 border: 2px solid #727bb1;
			 border-radius: 0.75em;
			 -webkit-transform-style: preserve-3d;
			 transform-style: preserve-3d;
			 -webkit-transition: background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
			 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1);
			}
			
			button.learn-more::before {
			 position: absolute;
			 content: '';
			 width: 100%;
			 height: 100%;
			 top: 0;
			 left: 0;
			 right: 0;
			 bottom: 0;
			 background: #c6ccf9;
			 border-radius: inherit;
			 -webkit-box-shadow: 0 0 0 2px #727bb1, 0 0.625em 0 0 #ffe3e2;
			 box-shadow: 0 0 0 2px #727bb1, 0 0.625em 0 0 #ffe3e2;
			 -webkit-transform: translate3d(0, 0.75em, -1em);
			 transform: translate3d(0, 0.75em, -1em);
			 transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-transform 150ms cubic-bezier(0, 0, 0.58, 1), -webkit-box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
			}
			
			button.learn-more:hover {
			 background: #ffe4ce;
			 -webkit-transform: translate(0, 0.25em);
			 transform: translate(0, 0.25em);
			}
			
			button.learn-more:hover::before {
			 -webkit-box-shadow: 0 0 0 2px #727bb1, 0 0.5em 0 0 #ffe3e2;
			 box-shadow: 0 0 0 2px #727bb1, 0 0.5em 0 0 #ffe3e2;
			 -webkit-transform: translate3d(0, 0.5em, -1em);
			 transform: translate3d(0, 0.5em, -1em);
			}
			
			button.learn-more:active {
			 background: #ffe4ce;
			 -webkit-transform: translate(0em, 0.75em);
			 transform: translate(0em, 0.75em);
			}
			
			button.learn-more:active::before {
			 -webkit-box-shadow: 0 0 0 2px #727bb1, 0 0 #d1cbff;
			 box-shadow: 0 0 0 2px #727bb1, 0 0 #d1cbff;
			 -webkit-transform: translate3d(0, 0, -1em);
			 transform: translate3d(0, 0, -1em);
			}
		</style>
	</head>
	<body>
		<button class="learn-more">> w <;;;</button>
	</body>
</html>

效果：

凹陷效果：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body{
				background-color: #f0f0f0;
			}
			button {
			 color: #090909;
			 padding: 0.7em 1.7em;
			 font-size: 18px;
			 border-radius: 0.5em;
			 background: #e8e8e8;
			 border: 1px solid #e8e8e8;
			 transition: all .3s;
			 box-shadow: 6px 6px 12px #c5c5c5,
			             -6px -6px 12px #ffffff;
			}
			
			button:active {
			 color: #666;
			 box-shadow: inset 4px 4px 12px #c5c5c5,
			             inset -4px -4px 12px #ffffff;
			}
		</style>
	</head>
	<body>
		<button>T____T</button>
	</body>
</html>

效果：

开关按钮：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 开关：滑块周围的盒子 */
			.switch {
			  font-size: 17px;
			  position: relative;
			  display: inline-block;
			  width: 3.5em;
			  height: 2em;
			}
			
			/* 隐藏默认的HTML复选框 */
			.switch input {
			  opacity: 0;
			  width: 0;
			  height: 0;
			}
			
			/* 滑块 */
			.slider {
			  position: absolute;
			  cursor: pointer;
			  top: 0;
			  left: 0;
			  right: 0;
			  bottom: 0;
			  background-color: #B0B0B0;
			  border: 1px solid #B0B0B0;
			  transition: .4s;
			  border-radius: 32px;
			  outline: none;
			}
			
			.slider:before {
			  position: absolute;
			  content: "";
			  height: 2rem;
			  width: 2rem;
			  border-radius: 50%;
			  outline: 2px solid #B0B0B0;
			  left: -1px;
			  bottom: -1px;
			  background-color: #fff;
			  transition: transform .25s ease-in-out 0s;
			}
			
			.slider-icon {
			  opacity: 0;
			  height: 12px;
			  width: 12px;
			  stroke-width: 8;
			  position: absolute;
			  z-index: 999;
			  stroke: #222222;
			  right: 60%;
			  top: 30%;
			  transition: right ease-in-out .3s, opacity ease-in-out .15s;
			}
			
			input:checked + .slider {
			  background-color: #222222;
			}
			
			input:checked + .slider .slider-icon {
			  opacity: 1;
			  right: 20%;
			}
			
			input:checked + .slider:before {
			  transform: translateX(1.5em);
			  outline-color: #181818;
			}
		</style>
	</head>
	<body>
		<label class="switch">
		  <input type="checkbox">
		  <span class="slider">
		   <svg class="slider-icon" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="presentation"><path fill="none" d="m4 16.5 8 8 16-16"></path></svg> 
		  </span>
		</label>
	</body>
</html>

效果：