带动画的好看的按钮集合HTML + CSS各种好看按钮组件

最新推荐文章于 2024-05-16 03:09:27 发布
最新推荐文章于 2024-05-16 03:09:27 发布
阅读量1.3k 收藏 13
点赞数 1
文章标签： html css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kuangxiuhong/article/details/126124332
版权

展示效果

[注意:]并不是单纯的效果，而是有动画的

 

代码段

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<h1>Animation Buttons</h1>
		<p>Hover us and enjoy the satisfying neumorphic animation designs!</p>
		<div class="frame">
		  <button class="custom-btn btn-1">Read More</button>
		  <button class="custom-btn btn-2">Read More</button>
		  <button class="custom-btn btn-3"><span>Read More</span></button>
		  <button class="custom-btn btn-4"><span>Read More</span></button>
		  <button class="custom-btn btn-5"><span>Read More</span></button>
		  <button class="custom-btn btn-6"><span>Read More</span></button>
		  <button class="custom-btn btn-7"><span>Read More</span></button>
		  <button class="custom-btn btn-8"><span>Read More</span></button>
		  <button class="custom-btn btn-9">Read More</button>
		  <button class="custom-btn btn-10">Read More</button>
		  <button class="custom-btn btn-11">Read More<div class="dot"></div></button>
		  <button class="custom-btn btn-12"><span>Click!</span><span>Read More</span></button>
		  <button class="custom-btn btn-13">Read More</button>
		  <button class="custom-btn btn-14">Read More</button>
		  <button class="custom-btn btn-15">Read More</button>
		  <button class="custom-btn btn-16">Read More</button>
		  <p style="font-family: Andale Mono, monospace;">
		    DEERBUCKS.DESIGNING</p>
		</div>

	</body>
</html>
<style>
	
	body {
	  background: #e0e5ec;
	}
	h1 {
	  position: relative;
	  text-align: center;
	  color: #353535;
	  font-size: 50px;
	  font-family: "Cormorant Garamond", serif;
	}
	
	p {
	  font-family: 'Lato', sans-serif;
	  font-weight: 300;
	  text-align: center;
	  font-size: 18px;
	  color: #676767;
	}
	.frame {
	  width: 90%;
	  margin: 40px auto;
	  text-align: center;
	}
	button {
	  margin: 20px;
	}
	.custom-btn {
	  width: 130px;
	  height: 40px;
	  color: #fff;
	  border-radius: 5px;
	  padding: 10px 25px;
	  font-family: 'Lato', sans-serif;
	  font-weight: 500;
	  background: transparent;
	  cursor: pointer;
	  transition: all 0.3s ease;
	  position: relative;
	  display: inline-block;
	   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  outline: none;
	}
	
	/* 1 */
	.btn-1 {
	  background: rgb(6,14,131);
	  background: linear-gradient(0deg, rgba(6,14,131,1) 0%, rgba(12,25,180,1) 100%);
	  border: none;
	}
	.btn-1:hover {
	   background: rgb(0,3,255);
	background: linear-gradient(0deg, rgba(0,3,255,1) 0%, rgba(2,126,251,1) 100%);
	}
	
	/* 2 */
	.btn-2 {
	  background: rgb(96,9,240);
	  background: linear-gradient(0deg, rgba(96,9,240,1) 0%, rgba(129,5,240,1) 100%);
	  border: none;
	  
	}
	.btn-2:before {
	  height: 0%;
	  width: 2px;
	}
	.btn-2:hover {
	  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
	              -4px -4px 6px 0 rgba(116, 125, 136, .5), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.2),
	    inset 4px 4px 6px 0 rgba(0, 0, 0, .4);
	}
	
	
	/* 3 */
	.btn-3 {
	  background: rgb(0,172,238);
	background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
	  width: 130px;
	  height: 40px;
	  line-height: 42px;
	  padding: 0;
	  border: none;
	  
	}
	.btn-3 span {
	  position: relative;
	  display: block;
	  width: 100%;
	  height: 100%;
	}
	.btn-3:before,
	.btn-3:after {
	  position: absolute;
	  content: "";
	  right: 0;
	  top: 0;
	   background: rgba(2,126,251,1);
	  transition: all 0.3s ease;
	}
	.btn-3:before {
	  height: 0%;
	  width: 2px;
	}
	.btn-3:after {
	  width: 0%;
	  height: 2px;
	}
	.btn-3:hover{
	   background: transparent;
	  box-shadow: none;
	}
	.btn-3:hover:before {
	  height: 100%;
	}
	.btn-3:hover:after {
	  width: 100%;
	}
	.btn-3 span:hover{
	   color: rgba(2,126,251,1);
	}
	.btn-3 span:before,
	.btn-3 span:after {
	  position: absolute;
	  content: "";
	  left: 0;
	  bottom: 0;
	   background: rgba(2,126,251,1);
	  transition: all 0.3s ease;
	}
	.btn-3 span:before {
	  width: 2px;
	  height: 0%;
	}
	.btn-3 span:after {
	  width: 0%;
	  height: 2px;
	}
	.btn-3 span:hover:before {
	  height: 100%;
	}
	.btn-3 span:hover:after {
	  width: 100%;
	}
	
	/* 4 */
	.btn-4 {
	  background-color: #4dccc6;
	background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
	  line-height: 42px;
	  padding: 0;
	  border: none;
	}
	.btn-4:hover{
	  background-color: #89d8d3;
	background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
	}
	.btn-4 span {
	  position: relative;
	  display: block;
	  width: 100%;
	  height: 100%;
	}
	.btn-4:before,
	.btn-4:after {
	  position: absolute;
	  content: "";
	  right: 0;
	  top: 0;
	   box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
	              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.9),
	    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
	  transition: all 0.3s ease;
	}
	.btn-4:before {
	  height: 0%;
	  width: .1px;
	}
	.btn-4:after {
	  width: 0%;
	  height: .1px;
	}
	.btn-4:hover:before {
	  height: 100%;
	}
	.btn-4:hover:after {
	  width: 100%;
	}
	.btn-4 span:before,
	.btn-4 span:after {
	  position: absolute;
	  content: "";
	  left: 0;
	  bottom: 0;
	  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.9),
	              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.9),
	    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
	  transition: all 0.3s ease;
	}
	.btn-4 span:before {
	  width: .1px;
	  height: 0%;
	}
	.btn-4 span:after {
	  width: 0%;
	  height: .1px;
	}
	.btn-4 span:hover:before {
	  height: 100%;
	}
	.btn-4 span:hover:after {
	  width: 100%;
	}
	
	/* 5 */
	.btn-5 {
	  width: 130px;
	  height: 40px;
	  line-height: 42px;
	  padding: 0;
	  border: none;
	  background: rgb(255,27,0);
	background: linear-gradient(0deg, rgba(255,27,0,1) 0%, rgba(251,75,2,1) 100%);
	}
	.btn-5:hover {
	  color: #f0094a;
	  background: transparent;
	   box-shadow:none;
	}
	.btn-5:before,
	.btn-5:after{
	  content:'';
	  position:absolute;
	  top:0;
	  right:0;
	  height:2px;
	  width:0;
	  background: #f0094a;
	  box-shadow:
	   -1px -1px 5px 0px #fff,
	   7px 7px 20px 0px #0003,
	   4px 4px 5px 0px #0002;
	  transition:400ms ease all;
	}
	.btn-5:after{
	  right:inherit;
	  top:inherit;
	  left:0;
	  bottom:0;
	}
	.btn-5:hover:before,
	.btn-5:hover:after{
	  width:100%;
	  transition:800ms ease all;
	}
	
	
	/* 6 */
	.btn-6 {
	  background: rgb(247,150,192);
	background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
	  line-height: 42px;
	  padding: 0;
	  border: none;
	}
	.btn-6 span {
	  position: relative;
	  display: block;
	  width: 100%;
	  height: 100%;
	}
	.btn-6:before,
	.btn-6:after {
	  position: absolute;
	  content: "";
	  height: 0%;
	  width: 1px;
	 box-shadow:
	   -1px -1px 20px 0px rgba(255,255,255,1),
	   -4px -4px 5px 0px rgba(255,255,255,1),
	   7px 7px 20px 0px rgba(0,0,0,.4),
	   4px 4px 5px 0px rgba(0,0,0,.3);
	}
	.btn-6:before {
	  right: 0;
	  top: 0;
	  transition: all 500ms ease;
	}
	.btn-6:after {
	  left: 0;
	  bottom: 0;
	  transition: all 500ms ease;
	}
	.btn-6:hover{
	  background: transparent;
	  color: #76aef1;
	  box-shadow: none;
	}
	.btn-6:hover:before {
	  transition: all 500ms ease;
	  height: 100%;
	}
	.btn-6:hover:after {
	  transition: all 500ms ease;
	  height: 100%;
	}
	.btn-6 span:before,
	.btn-6 span:after {
	  position: absolute;
	  content: "";
	  box-shadow:
	   -1px -1px 20px 0px rgba(255,255,255,1),
	   -4px -4px 5px 0px rgba(255,255,255,1),
	   7px 7px 20px 0px rgba(0,0,0,.4),
	   4px 4px 5px 0px rgba(0,0,0,.3);
	}
	.btn-6 span:before {
	  left: 0;
	  top: 0;
	  width: 0%;
	  height: .5px;
	  transition: all 500ms ease;
	}
	.btn-6 span:after {
	  right: 0;
	  bottom: 0;
	  width: 0%;
	  height: .5px;
	  transition: all 500ms ease;
	}
	.btn-6 span:hover:before {
	  width: 100%;
	}
	.btn-6 span:hover:after {
	  width: 100%;
	}
	
	/* 7 */
	.btn-7 {
	background: linear-gradient(0deg, rgba(255,151,0,1) 0%, rgba(251,75,2,1) 100%);
	  line-height: 42px;
	  padding: 0;
	  border: none;
	}
	.btn-7 span {
	  position: relative;
	  display: block;
	  width: 100%;
	  height: 100%;
	}
	.btn-7:before,
	.btn-7:after {
	  position: absolute;
	  content: "";
	  right: 0;
	  bottom: 0;
	  background: rgba(251,75,2,1);
	  box-shadow:
	   -7px -7px 20px 0px rgba(255,255,255,.9),
	   -4px -4px 5px 0px rgba(255,255,255,.9),
	   7px 7px 20px 0px rgba(0,0,0,.2),
	   4px 4px 5px 0px rgba(0,0,0,.3);
	  transition: all 0.3s ease;
	}
	.btn-7:before{
	   height: 0%;
	   width: 2px;
	}
	.btn-7:after {
	  width: 0%;
	  height: 2px;
	}
	.btn-7:hover{
	  color: rgba(251,75,2,1);
	  background: transparent;
	}
	.btn-7:hover:before {
	  height: 100%;
	}
	.btn-7:hover:after {
	  width: 100%;
	}
	.btn-7 span:before,
	.btn-7 span:after {
	  position: absolute;
	  content: "";
	  left: 0;
	  top: 0;
	  background: rgba(251,75,2,1);
	  box-shadow:
	   -7px -7px 20px 0px rgba(255,255,255,.9),
	   -4px -4px 5px 0px rgba(255,255,255,.9),
	   7px 7px 20px 0px rgba(0,0,0,.2),
	   4px 4px 5px 0px rgba(0,0,0,.3);
	  transition: all 0.3s ease;
	}
	.btn-7 span:before {
	  width: 2px;
	  height: 0%;
	}
	.btn-7 span:after {
	  height: 2px;
	  width: 0%;
	}
	.btn-7 span:hover:before {
	  height: 100%;
	}
	.btn-7 span:hover:after {
	  width: 100%;
	}
	
	/* 8 */
	.btn-8 {
	  background-color: #f0ecfc;
	background-image: linear-gradient(315deg, #f0ecfc 0%, #c797eb 74%);
	  line-height: 42px;
	  padding: 0;
	  border: none;
	}
	.btn-8 span {
	  position: relative;
	  display: block;
	  width: 100%;
	  height: 100%;
	}
	.btn-8:before,
	.btn-8:after {
	  position: absolute;
	  content: "";
	  right: 0;
	  bottom: 0;
	  background: #c797eb;
	  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
	              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.5),
	    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
	  transition: all 0.3s ease;
	}
	.btn-8:before{
	   height: 0%;
	   width: 2px;
	}
	.btn-8:after {
	  width: 0%;
	  height: 2px;
	}
	.btn-8:hover:before {
	  height: 100%;
	}
	.btn-8:hover:after {
	  width: 100%;
	}
	.btn-8:hover{
	  background: transparent;
	}
	.btn-8 span:hover{
	  color: #c797eb;
	}
	.btn-8 span:before,
	.btn-8 span:after {
	  position: absolute;
	  content: "";
	  left: 0;
	  top: 0;
	  background: #c797eb;
	  /*box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
	              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.5),
	    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);*/
	  transition: all 0.3s ease;
	}
	.btn-8 span:before {
	  width: 2px;
	  height: 0%;
	}
	.btn-8 span:after {
	  height: 2px;
	  width: 0%;
	}
	.btn-8 span:hover:before {
	  height: 100%;
	}
	.btn-8 span:hover:after {
	  width: 100%;
	}
	  
	
	/* 9 */
	.btn-9 {
	  border: none;
	  transition: all 0.3s ease;
	  overflow: hidden;
	}
	.btn-9:after {
	  position: absolute;
	  content: " ";
	  z-index: -1;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	   background-color: #1fd1f9;
	background-image: linear-gradient(315deg, #1fd1f9 0%, #b621fe 74%);
	  transition: all 0.3s ease;
	}
	.btn-9:hover {
	  background: transparent;
	  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
	              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.5),
	    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
	  color: #fff;
	}
	.btn-9:hover:after {
	  -webkit-transform: scale(2) rotate(180deg);
	  transform: scale(2) rotate(180deg);
	  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.5),
	              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.5),
	    inset 4px 4px 6px 0 rgba(116, 125, 136, .3);
	}
	
	/* 10 */
	.btn-10 {
	  background: rgb(22,9,240);
	background: linear-gradient(0deg, rgba(22,9,240,1) 0%, rgba(49,110,244,1) 100%);
	  color: #fff;
	  border: none;
	  transition: all 0.3s ease;
	  overflow: hidden;
	}
	.btn-10:after {
	  position: absolute;
	  content: " ";
	  top: 0;
	  left: 0;
	  z-index: -1;
	  width: 100%;
	  height: 100%;
	  transition: all 0.3s ease;
	  -webkit-transform: scale(.1);
	  transform: scale(.1);
	}
	.btn-10:hover {
	  color: #fff;
	  border: none;
	  background: transparent;
	}
	.btn-10:hover:after {
	  background: rgb(0,3,255);
	background: linear-gradient(0deg, rgba(2,126,251,1) 0%,  rgba(0,3,255,1)100%);
	  -webkit-transform: scale(1);
	  transform: scale(1);
	}
	
	/* 11 */
	.btn-11 {
	  border: none;
	  background: rgb(251,33,117);
	    background: linear-gradient(0deg, rgba(251,33,117,1) 0%, rgba(234,76,137,1) 100%);
	    color: #fff;
	    overflow: hidden;
	}
	.btn-11:hover {
	    text-decoration: none;
	    color: #fff;
	}
	.btn-11:before {
	    position: absolute;
	    content: '';
	    display: inline-block;
	    top: -180px;
	    left: 0;
	    width: 30px;
	    height: 100%;
	    background-color: #fff;
	    animation: shiny-btn1 3s ease-in-out infinite;
	}
	.btn-11:hover{
	  opacity: .7;
	}
	.btn-11:active{
	  box-shadow:  4px 4px 6px 0 rgba(255,255,255,.3),
	              -4px -4px 6px 0 rgba(116, 125, 136, .2), 
	    inset -4px -4px 6px 0 rgba(255,255,255,.2),
	    inset 4px 4px 6px 0 rgba(0, 0, 0, .2);
	}
	
	
	@-webkit-keyframes shiny-btn1 {
	    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
	    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
	    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
	    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
	}
	
	
	/* 12 */
	.btn-12{
	  position: relative;
	  right: 20px;
	  bottom: 20px;
	  border:none;
	  box-shadow: none;
	  width: 130px;
	  height: 40px;
	  line-height: 42px;
	  -webkit-perspective: 230px;
	  perspective: 230px;
	}
	.btn-12 span {
	  background: rgb(0,172,238);
	background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
	  display: block;
	  position: absolute;
	  width: 130px;
	  height: 40px;
	  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  border-radius: 5px;
	  margin:0;
	  text-align: center;
	  -webkit-box-sizing: border-box;
	  -moz-box-sizing: border-box;
	  box-sizing: border-box;
	  -webkit-transition: all .3s;
	  transition: all .3s;
	}
	.btn-12 span:nth-child(1) {
	  box-shadow:
	   -7px -7px 20px 0px #fff9,
	   -4px -4px 5px 0px #fff9,
	   7px 7px 20px 0px #0002,
	   4px 4px 5px 0px #0001;
	  -webkit-transform: rotateX(90deg);
	  -moz-transform: rotateX(90deg);
	  transform: rotateX(90deg);
	  -webkit-transform-origin: 50% 50% -20px;
	  -moz-transform-origin: 50% 50% -20px;
	  transform-origin: 50% 50% -20px;
	}
	.btn-12 span:nth-child(2) {
	  -webkit-transform: rotateX(0deg);
	  -moz-transform: rotateX(0deg);
	  transform: rotateX(0deg);
	  -webkit-transform-origin: 50% 50% -20px;
	  -moz-transform-origin: 50% 50% -20px;
	  transform-origin: 50% 50% -20px;
	}
	.btn-12:hover span:nth-child(1) {
	  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  -webkit-transform: rotateX(0deg);
	  -moz-transform: rotateX(0deg);
	  transform: rotateX(0deg);
	}
	.btn-12:hover span:nth-child(2) {
	  box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	 color: transparent;
	  -webkit-transform: rotateX(-90deg);
	  -moz-transform: rotateX(-90deg);
	  transform: rotateX(-90deg);
	}
	
	
	/* 13 */
	.btn-13 {
	  background-color: #89d8d3;
	background-image: linear-gradient(315deg, #89d8d3 0%, #03c8a8 74%);
	  border: none;
	  z-index: 1;
	}
	.btn-13:after {
	  position: absolute;
	  content: "";
	  width: 100%;
	  height: 0;
	  bottom: 0;
	  left: 0;
	  z-index: -1;
	  border-radius: 5px;
	   background-color: #4dccc6;
	background-image: linear-gradient(315deg, #4dccc6 0%, #96e4df 74%);
	  box-shadow:
	   -7px -7px 20px 0px #fff9,
	   -4px -4px 5px 0px #fff9,
	   7px 7px 20px 0px #0002,
	   4px 4px 5px 0px #0001;
	  transition: all 0.3s ease;
	}
	.btn-13:hover {
	  color: #fff;
	}
	.btn-13:hover:after {
	  top: 0;
	  height: 100%;
	}
	.btn-13:active {
	  top: 2px;
	}
	
	
	/* 14 */
	.btn-14 {
	  background: rgb(255,151,0);
	  border: none;
	  z-index: 1;
	}
	.btn-14:after {
	  position: absolute;
	  content: "";
	  width: 100%;
	  height: 0;
	  top: 0;
	  left: 0;
	  z-index: -1;
	  border-radius: 5px;
	  background-color: #eaf818;
	  background-image: linear-gradient(315deg, #eaf818 0%, #f6fc9c 74%);
	   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5);
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  transition: all 0.3s ease;
	}
	.btn-14:hover {
	  color: #000;
	}
	.btn-14:hover:after {
	  top: auto;
	  bottom: 0;
	  height: 100%;
	}
	.btn-14:active {
	  top: 2px;
	}
	
	/* 15 */
	.btn-15 {
	  background: #b621fe;
	  border: none;
	  z-index: 1;
	}
	.btn-15:after {
	  position: absolute;
	  content: "";
	  width: 0;
	  height: 100%;
	  top: 0;
	  right: 0;
	  z-index: -1;
	  background-color: #663dff;
	  border-radius: 5px;
	   box-shadow:inset 2px 2px 2px 0px rgba(255,255,255,.5),
	   7px 7px 20px 0px rgba(0,0,0,.1),
	   4px 4px 5px 0px rgba(0,0,0,.1);
	  transition: all 0.3s ease;
	}
	.btn-15:hover {
	  color: #fff;
	}
	.btn-15:hover:after {
	  left: 0;
	  width: 100%;
	}
	.btn-15:active {
	  top: 2px;
	}
	
	
	/* 16 */
	.btn-16 {
	  border: none;
	  color: #000;
	}
	.btn-16:after {
	  position: absolute;
	  content: "";
	  width: 0;
	  height: 100%;
	  top: 0;
	  left: 0;
	  direction: rtl;
	  z-index: -1;
	  box-shadow:
	   -7px -7px 20px 0px #fff9,
	   -4px -4px 5px 0px #fff9,
	   7px 7px 20px 0px #0002,
	   4px 4px 5px 0px #0001;
	  transition: all 0.3s ease;
	}
	.btn-16:hover {
	  color: #000;
	}
	.btn-16:hover:after {
	  left: auto;
	  right: 0;
	  width: 100%;
	}
	.btn-16:active {
	  top: 2px;
	}
	
</style>

Mary丶笑笑
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML 按钮交互,20 个交互非常棒的按钮代码_html/css_WEB-ITnose
weixin_32892145的博客
06-29 2412
你能想象网页中没有按钮吗？我打赌你不会。在网页中，拥有按钮并不奇怪，这些看似很小、主要以矩形表现(如导航栏，版权信息)的东西，其实是网页 UI 中基础之一。它们不仅使链接看起来更有分量、吸引人和鲜明，而且他们还能提高跳转率和用户体验，使之更方便和直观。这些 CTA (Call-to-action：行为召唤)能帮你获得更多的潜在客户和促进业务的扩展。HOST按钮的开发需要注意它的形状、颜色、空间、排...
html 好看的按钮,html-好看的CSS按钮
weixin_35897479的博客
06-23 308
该楼层疑似违规已被系统折叠隐藏此楼查看此楼CSS实现的几个非常漂亮的按钮--建站学.btn {BORDER-RIGHT: #7b9ebd 1px solid; PADDING-RIGHT: 2px; BORDER-TOP: #7b9ebd1px solid; PADDING-LEFT: 2px; FONT-SIZE: 12px; FILTER:progid:DXImageTransform.Mi...
一定能用到的简单但实用的五种按钮样式（原生HTML+CSS步骤详解，含详细注释）(1)
最新发布
2301_78145364的博客
05-16 1232
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！
html好看的单选按钮,基于jquery自定义的漂亮单选按钮RadioButton
weixin_39602005的博客
06-21 599
继续分享web前端自定义控件，今天所要分享的控件是单选按钮，希望对你有收获，有好的建议也希望能留言给我。代码如下：Html代码如下：Css代码如下：.radio{float:left;background:url(/img/Icon_BG.png);}.radio{width:14px;height:14px;background-position:0px -58px;cursor:pointer...
html好看的按钮css样式大全,css3教程_五种漂亮样式，CSS3动画按钮效果
weixin_35897853的博客
06-23 1445
CSS代码：.button01 {width: 200px;margin: 50px auto 20px auto;}.button01 a {display: block;height: 50px;width: 200px;/*TYPE*/color: white;font: 17px/50px Helvetica, Verdana, sans-serif;text-decoration: no...
8个时尚而简约的HTML5按钮
yazi1297的专栏
03-03 2853
转自:http://www.html5tricks.com/8-fasion-html5-buttons.html 按钮在网页交互中非常重要，本文主要分享一些外观时尚而又简约的HTML5按钮，有些按钮带有丰富的HTML5动画，有些按钮却有着清爽的外观，给人耳目一新的感觉，一起来看看吧。 1、基于Bootstrap的jQuery开关按钮组合 Bootstrap是一款由Twitt
网页炫酷特效html+css+js源码
04-24
网页炫酷特效html+css+js源码是一个集合了多种互动和视觉效果的资源包，主要针对前端开发者和设计师。这个资源包包含了HTML结构、CSS样式以及JavaScript脚本，为创建引人入胜的网页提供了丰富的素材。这些特效通常...
HTML+css框架集合
08-18
除此之外，还有一些专门针对特定需求的框架，如Materialize CSS，它是基于Google的Material Design设计规范构建的，提供了丰富的动画效果和组件，使得网站看起来更加现代和互动。另一款是 Bulma，它基于Flexbox模型...
60套HTML5+CSS3后台管理登录模板
01-11
这些模板充分利用了HTML5的新特性，如离线存储、媒体元素、表单控件改进等，以及CSS3的强大样式和动画功能，如选择器增强、过渡、动画、多列布局等。 1. **HTML5新特性**：HTML5引入了许多新的元素，例如`<header>`...
div+css 30个通用网站后台管理系统模板源码分享/html4/bootstrap
10-17
标题中的“div+css 30个通用网站后台管理系统模板源码分享/html4/bootstrap”表明这是一个包含30个不同设计的网站后台管理系统的源代码集合，这些系统模板基于HTML4和Bootstrap框架构建，同时可能利用了CSS（层叠...
很不错的后台模板（html+css+js）
02-25
在这个后台模板中，CSS文件将负责使界面看起来专业且用户友好，包括按钮、表单、导航栏等组件的样式。 JavaScript是一种动态编程语言，用于增加网页的交互性和功能。在后台模板中，JavaScript文件通常包含事件处理...
HTML完美动态表格(可编辑)
04-23
完美表格。在此基础上可进行AJAX开发.可编辑选项包括下拉框和文本框等。动态添加行 删除行。tab键切换。回车键改变状态等。
HTML5 CSS3 gradient、box-shadow按钮特效代码大全.rar
07-10
HTML5 CSS3使用 gradient、box-shadow实现的按钮特效代码大全，带阴影的按钮，个个都很漂亮的CSS3按钮，你借助这些按钮效果，也可进一步学习下gradient、box-shadow的具体用法，对提高CSS3的编程水平有帮助。
纯CSS3冒泡动画按钮实现教程
weixin_34274029的博客
09-09 326
这款CSS3动画按钮非常的有创意，鼠标在滑过按钮时并不像其他按钮那样仅仅改变按钮的背景颜色，而是出现很酷的冒泡动画。这么惊艳的CSS3动画按钮，这篇文章主要将按钮实现的过程和代码分享给大家，希望能给在学习CSS3的同学带来实质性的帮助。可以下来看看在线演示效果： 在线演示        源码下载 接下来我们来讲解一下这款CSS3气泡动画的按钮实现过程，主要由HTML代码和CSS代码组成。 ...
H5 页面36种漂亮的CSS3网页按钮Button样式
weixin_43617604的博客
11-29 9797
h5相关特效source 点击查看 36种漂亮的CSS3网页按钮Button样式 效果图 代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>36种漂亮的CSS3网页按钮Button样式</title> <style t...
html添加按钮语句,快速入门：添加按钮 (HTML)
weixin_35141284的博客
06-11 8135
快速入门：添加按钮 (HTML)03/04/2016本文内容[ 本文适用于编写 Windows 运行时应用的 Windows 8.x 和 Windows Phone 8.x 开发人员。如果你要针对 Windows 10 进行开发，请参阅 最新文档 ]了解如何创建不同类型的 button控件。先决条件关于按钮和按钮事件若要在 HTML 中创建按钮，需要向你的 HTML 中添加一个 button 元素...
html 按钮动画,简单css3按钮动画的实现
weixin_39777242的博客
06-08 274
* {margin:0;padding:0;}body {font-size:14px;background:rgba(0,0,0,0.8);color:#555;}.container {width:1000px;margin:0 auto;}.container-div1 {margin-top:50px;background:#fff;height:500px;}.z-btn {margin...
【技术控】 如何做按钮小动画？HTML+CSS3
ak619的博客
02-25 1100
当在做网站前端的时候，如何利用HTML+CSS3 做按钮小动画，下面的案例大家可以试试，附源代码！ 按钮，宽：200，高：45，背景颜色：浅蓝 #b9ccd2 如下图：   当鼠标移动到按钮上，触发动画效果，形成深灰色圆圈向外扩展。如下图：   按钮的大小和颜色可以根据实际情况调整。 例如：把按钮改成，宽：300，高：80，背景颜色：浅绿 #9ef271   代码修改，如下
javascript动态生成按钮并绑定点击事件
热门推荐
海峰的博客
10-07 4万+
前一个多月公司的前端开发人员离职，公司一直在招前端，基本上每天都有几个来面试的人，就这个面试频率，也才招了一个多月才招到。绝大部分都是死在了一道上机面试提上。题目很基础，但也很考基本功，基本上才3%左右的人做出来。当时我就在想以我的半吊子前端知识挑战一下这个题目。之前一直忙着把Android项目弄上线，修改bug，一直没时间。现在国庆节放假，发了一天时间把前端又看了下，然后理所当然的就写出来了，功
html +css+js 实现右上角带关闭按钮的弹窗
05-26
可以用 HTML、CSS 和 JavaScript 实现带关闭按钮的弹窗。下面是一个简单的实现： HTML： ```html <span class="close">× 弹窗标题 弹窗内容 ``` CSS： ```css .popup { display: none; /* 初始...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值