Jquery 我如何制作这样的css渐变和鼠标越过边框

我需要帮助复制三个像这样的按钮，我最关心的是如何使渐变看起来完全像他们。我也很好奇如何在鼠标上方或点击按钮时添加白色边框

我尝试了这个梯度代码，但我得到的只是一条穿过中间的粗白线。任何帮助都将不胜感激

#蓝色{
背景：线性梯度（#00a1d6，白色，#00a1d6）；
}
#黄色的{
背景：线性梯度（#df8700，白色，#df8700）；
}
#红色的{
背景：线性梯度（#950f16，白色，#950f16）；
}

---

你可能想要这样的东西。

明白了，玩过之后我想出了解决办法

$(".square"/*button class or id*/).hover(function(){
    $(this).css("border","2px solid #fff;")
},function(){
    $(this).css("border","none")
});

#color{
    background: ... (#00a1d6 0%, #55b7d6 45% , #00a1d6 0%);
      }

---

根据DOM的构造方式，您可能希望避免使用边框，因为有时候边框厚度会在屏幕上移动元素。尝试使用框阴影

#蓝色：悬停，
#黄色：悬停，
#红色：悬停，
#蓝色：活动，
#黄色：活动，
#红色：活动{
盒影：嵌入0 1px 2px白色；
}

#color{
    background: ... (#00a1d6 0%, #55b7d6 45% , #00a1d6 0%);
      }