Javascript 将按钮转换为悬停过渡

我在网上看到了一个漂亮的按钮的代码，当点击它时，它似乎被按下了

我想添加一个过渡，按钮在悬停时被按下，而不是在单击时被按下

我该怎么做

/**
*AddToCalendar图标样式
* http://addtocalendar.com
*/
/*基地*/
.addtocalendar变量{
显示：无；
}
addtocalendar先生{
位置：相对位置；
显示：内联块；
背景：透明！重要；
}
.atcb链接{
显示：块；
大纲：无！重要；
光标：指针；
}
.atcb-link:focus~ul，
.atcb链路：激活~ul，
.atcb列表：悬停{
能见度：可见；
}
.atcb列表{
可见性：隐藏；
位置：绝对位置；
最高：100%；
左：0；
宽度：170px；
z指数：900；
}
.atcb列表，
.atcb项目
{
列表样式：无；
保证金：0；
填充：0；
背景：#fff；
}
.atcb项目{
浮动：无；
文本对齐：左对齐；
}
.atcb项目链接
{
文字装饰：无；
大纲：无；
显示：块；
}
.atcb-item.hover，
.atcb项目：悬停{
位置：相对位置；
z指数：900；
光标：指针；
文字装饰：无；
大纲：无；
}
/*橙色的*/
.atc样式发光橙色.atcb列表{
保证金：10px 0px 0px 0px；
填充：0；
颜色：#fff；
线高：1.3em；
垂直对齐：中间对齐；
缩放：1；
边界半径：4px；
}
.atc样式发光橙色.atcb链接
{
位置：相对位置；
颜色：rgba（255255,1）；
文字装饰：无；
背景色：rgba（219,87,5,1）；
字号：1em；
显示：块；
填充：4px；
-webkit边界半径：8px；
-moz边界半径：8px；
边界半径：8px；
-网络工具包盒阴影：0px 9px 0px rgba（219,31,5,1），0px 9px 12px rgba（0,0,0,7）；
-moz盒阴影：0px 9px 0px rgba（219,31,5,1），0px 9px 12px rgba（0,0,0,7）；
盒影：0px 9px 0px rgba（219,31,5,1），0px 9px 12px rgba（0,0,0,7）；
文本对齐：居中；
-webkit过渡：所有.1s易用性；
-moz转换：所有.1秒轻松；
-ms过渡：所有.1秒轻松；
-o型过渡：所有。1秒容易；
过渡：全部1秒轻松；
}
.atc样式发光橙色。atcb链接：激活{
-网络工具包盒阴影：0px 3px 0px rgba（219,31,5,1），0px 3px 6px rgba（0,0,0,9）；
-moz盒阴影：0px 3px 0px rgba（219,31,5,1），0px 3px 6px rgba（0,0,0,9）；
盒影：0px 3px 0px rgba（219,31,5,1），0px 3px 6px rgba（0,0,0,9）；
位置：相对位置；
顶部：6px；
}
.atc样式发光橙色.atcb链接，
.atc样式发光橙色。atcb链接：悬停，
.atc样式发光橙色。atcb链接：激活，
.atc样式发光橙色。atcb链接：焦点
{
颜色：#fff；
字体系列：“Verdana”；
字体大小：14px；
文字装饰：无；
大纲：无；
填充：7px 25px；
}
.atc样式发光橙色.atcb列表{
宽度：170px；
边框：1px实心#fff；
边框：1px实心rgb（186）；
边界半径：2px；
盒影：0 0 5px#AAA；
}
.atc样式发光橙色。atcb列表，
.atc样式发光橙色.atcb项目
{
背景：#fff；
颜色：#000；
}
.atc样式发光橙色.atcb项目，
.atc样式发光橙色.atcb项目链接
{
线高：1.3em；
垂直对齐：中间对齐；
缩放：1；
}
.atc样式发光橙色.atcb项目链接，
.atc样式发光橙色.atcb项目链接：悬停，
.atc样式发光橙色。atcb项目链接：激活，
.atc样式发光橙色.atcb项目链接：焦点
{
颜色：#000；
字体系列：“Verdana”；
字体大小：14px；
文字装饰：无；
大纲：无；
填充：5px15px；
}
.atc样式发光橙色.atcb项目链接：悬停，
.atc样式发光橙色。atcb项目链接：激活，
.atc样式发光橙色.atcb项目链接：焦点
{
颜色：#fff；
背景：rgba（219,87,5,1）；
}
.atc样式发光橙色.atcb-item.hover，
.atc样式发光橙色。atcb项目：悬停{
背景：rgba（250203175,1）；
}

添加到日历

为您需要的类提供鼠标悬停

.classname:hover{
   background-color:#FF0000;
}

更改此项：

.atc-style-glow-orange .atcb-link:active {

为此：

.atc-style-glow-orange .atcb-link:hover {

---

谢谢，如上所述，当我从侧面或底部靠近按钮时，这一功能会起作用，但如果我从顶部靠近按钮，按钮就会像圣诞夜的火鸡一样跳舞。知道为什么吗？是的，这是因为当你将按钮悬停时，它会移动，并在顶部留下空白（给出按下按钮的整体效果）。但同时，当向下移动时，按钮会从光标下方移开，这会导致按钮不再处于悬停模式，因此按钮会移回其先前位置（并移回ur光标下方），从而重新触发悬停时向下移动的循环效果。但由于悬停效果是光标从一个像素移动到另一个像素的事件，来回移动会不断重复而不是

顶部：6px，CSS将应用过渡效果，使其看起来更平滑，