HTML、CSS糖果颜色按钮动画

最新推荐文章于 2024-07-25 09:24:40 发布

喜欢爱笑的女孩子

最新推荐文章于 2024-07-25 09:24:40 发布

阅读量777

点赞数 1

文章标签：前端 html css 动画

本文链接：https://blog.csdn.net/qq_52899829/article/details/121485774

版权

HTML代码：

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/new_file.css"/>
	</head>
	<body>
		<header>
		   <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
		</header>
		
		<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;">
		    CANDY.BUTTON</p>
		</div>

	</body>
</html>

CSS代码：

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:hov

最低0.47元/天解锁文章

喜欢爱笑的女孩子

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML、CSS糖果颜色按钮动画

HTML代码：<html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/new_file.css"/> </head> <body> <header> <link href="https://fonts.googleapis.com/css.
复制链接

扫一扫