动画渐变按钮(开发日记)

最新推荐文章于 2024-07-12 16:55:56 发布

YukiAoba

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量275

点赞数 4

分类专栏： CSS 文章标签：前端

本文链接：https://blog.csdn.net/Retxp/article/details/139010378

版权

CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css-gradient-buttons</title>
	<style type="text/css">
body {
  display: grid;
  place-items: center;
  background: #fff;
  text-align: center;
  padding: 20px 20px;
}

.container {
  width: 600px;
}
.box {
  float: left;
  margin: 30px 8px;
}
button {
  cursor: pointer; 
}
.btn-grad-09 {background-image: linear-gradient(to right, #ED4264 0%, #FFEDBC  51%, #ED4264  100%)}
.btn-grad-09 {
   margin: 10px;
   padding: 15px 45px;
   text-align: center;
   text-transform: uppercase;
   transition: 0.5s;
   background-size: 200% auto;
   color: white;            
   box-shadow: 0 0 20px #eee;
   border-radius: 10px;
   display: block;
 }

 .btn-grad-09:hover {
   background-position: right center; /* change the direction of the change here */
   color: #fff;
   text-decoration: none;
 }
    </style>
</head>

<body>
<div class="container">
	<div class="box">
    <button class="btn-grad-09" >button</button>
  </div>
 
 </div>
</body>
</html>