jquery - 如何制作这样的 css 渐变和鼠标悬停边框

Question

我需要帮助来复制三个这样的按钮，我最关心的是如何使渐变看起来与它们完全一样。我也很好奇如何在鼠标悬停或单击按钮时放置白色边框

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

#blue{
  background: linear-gradient(#00a1d6, white , #00a1d6);
}
#yellow{
  background: linear-gradient(#df8700, white , #df8700);
}
#red{
  background: linear-gradient(#950f16, white , #950f16);
}

Answer 1

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