下拉菜单 - 浮动表单按钮

问：

背景

我正在生成一个列出结果的网页，我想提供一个使用 JS 动态创建的过滤器菜单（Bootstrap 下拉菜单）。因为有些过滤器可以有多个“项目”可供选择，所以如果高度超过 400px，我会在菜单上启用滚动;但是，我讨厌在菜单的最底部放置表单的“提交”或“取消”按钮，因为它可能对用户的眼睛不可见 - 我认为这会产生糟糕的用户体验。

目标

• 我想为“浮动”在可见下拉菜单底部的两个表单按钮创建一个浮动效果 - 非常像 Bootstrap 的 .class="sticky-bottom"
• 我希望按钮周围的背景以径向渐变模式模糊，也许？
• 当用户滚动到过滤器菜单的底部时，我想确保如果没有对这种浮动效果进行编码，按钮会自然存在。

问题

我想我已经有 50% 在那里了。就像我说的，使用 Bootstrap 的“sticky-bottom”类可以解决问题，但是文本顶部有按钮，看起来很忙。我尝试在元素上添加一些CSS样式，如下所示...

<div
  class="d-flex gap-3 p-3 rounded-pill"
  style="backdrop-filter: blur(3px);"
>
   [...buttons go here...]
</div>

...这得到了我所追求的——但我认为它不是最好看的。我希望我能使模糊区域变得渐进/渐变，因为它聚焦在按钮元素的中心。这也在菜单本身上创建了我不喜欢的额外填充。

我在尝试创建这种浮动效果时创建的另一个问题是将我的按钮放在“粘性底部”的 div 元素现在覆盖了它后面的复选框 - 阻止我在适当的元素上执行鼠标单击。

演示

• 这是网页的演示 1，经过精简，以说明我所拥有的“粘性底部”
• 这是演示 2，我尝试使用径向渐变，但我没有遵循需要和不配置的内容。-webkit-mask-image

建议

我愿意接受关于更好的方法来实现我所追求的目标的建议。可能有一个我什至没有想到的选项可以使这在视觉上令人愉悦？