技术频道导航
HTML/CSS
.NET技术
IIS技术
PHP技术
Js/JQuery
Photoshop
Fireworks
服务器技术
操作系统
网站运营

赞助商

分类目录

赞助商

最新文章

搜索

纯CSS:鼠标移上后,链接按钮颜色显示渐变效果

作者:admin    时间:2022-8-4 9:12:35    浏览:

鼠标移上后,链接按钮颜色显示渐变效果,这个设计很常见。今天,我介绍一下这个效果的实现方法,是用纯CSS来实现的。

完整HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
html, body {
  display: grid;
}
html {
  height: 100%;
}
body {
  place-content: center;
  background: #0e0b12;
}
a {
  padding: 0.875em 2em;
  border-radius: 1.5em;
  background: linear-gradient(90deg, #b828d1, transparent) #0085ff;
  color: #fff;
  font: 600 1.25em/1.25 ubuntu, sans-serif;
  text-decoration: none;
  text-shadow: 1px 1px #000a;
  transition: background-color 0.65s;
}
a:hover, a:focus {
  background-color: #46ffd7;
}
</style>
</head>
<body>
  <a href='#'>这是一个链接,鼠标移上来。</a>
</body>
</html>

demodownload

代码分析

1、背景颜色

下面CSS语句设置链接按钮的背景颜色。

background: linear-gradient(90deg, #b828d1, transparent) #0085ff;

如果没有这句,那么鼠标悬停效果会变成这样。

 

 2、过渡时间

下面这句设置过渡时间,是背景颜色变成渐变的过渡时间:0.65s。

transition: background-color 0.65s;

3、鼠标悬停颜色

下面这句设置鼠标悬停后,按钮的颜色。

a:hover, a:focus {
  background-color: #46ffd7;
}

我们可以更改这个颜色值(#46ffd7),自定义自己喜欢的颜色。

 

 

 

相关文章

标签: 按钮  光亮按钮  渐变按钮  button  
x
x
  • 站长推荐