求助：为Squarespace中的span类按钮实现指定CSS样式

用Squarespace搭建站点，无法修改按钮类型，需要给指定span按钮调整样式，尝试多种方法后仍不清楚如何将CSS正确应用到该span元素上。

按钮原始代码：

<span class="glf-button" data-glf-cuid="44e34391-d2c4-489d-90d7-22b985839fe4" data-glf-ruid="8c4c9138-a45f-41bb-8e6b-042c85a98586" > Se Meny & Bestill</span> 
<script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async ></script>

期望实现的样式：鼠标悬停时底部向上填充深色背景的动画效果，点击时底部显示同按钮底色的边框。

由于Squarespace支持添加自定义HTML代码，可将CSS内嵌到<style>标签中直接作用于目标span元素。以下是转换为标准CSS后的完整可直接使用的代码：

<style>
/* 引入Roboto字体 */
@import url('https://fonts.googleapis.com/css?family=Roboto:300');

.glf-button {
  position: relative;
  display: inline-block;
  padding: 15px 20px;
  background-color: #03A9F4;
  color: #fff;
  font-family: 'Roboto', sans-serif;
  font-size: 24px;
  letter-spacing: 1px;
  z-index: 1;
  cursor: pointer;
  outline: none;
  text-decoration: none;
}

.glf-button:before {
  content: '';
  position: absolute;
  box-sizing: border-box;
  border-bottom: 4px solid transparent;
  left: 0;
  bottom: 0;
  width: 0;
  height: 4px;
  background-color: #0288D1;
  transition: width .4s cubic-bezier(0.770, 0.000, 0.175, 1.000), height .2s .4s cubic-bezier(0.770, 0.000, 0.175, 1.000);
}

.glf-button:hover:before {
  width: 100%;
  height: 100%;
  transition: width .2s cubic-bezier(0.770, 0.000, 0.175, 1.000), height .2s .2s cubic-bezier(0.770, 0.000, 0.175, 1.000), border-color .4s;
}

.glf-button:active:before {
  border-bottom: 4px solid #03A9F4;
}
</style>

<span class="glf-button" data-glf-cuid="44e34391-d2c4-489d-90d7-22b985839fe4" data-glf-ruid="8c4c9138-a45f-41bb-8e6b-042c85a98586" > Se Meny & Bestill</span> 
<script src="https://www.fbgcdn.com/embedder/js/ewm2.js" defer async ></script>

关键调整说明 #

• 给.glf-button添加display: inline-block，让span元素支持padding和尺寸设置，模拟按钮的块级特性。
• 将原Sass变量替换为实际颜色值，转换为标准CSS语法，适配Squarespace环境。
• 保留了目标样式的核心动画：hover时从底部向上填充深色背景，点击时底部显示同按钮底色的边框。
• 内嵌<style>标签确保样式直接作用于该span元素，减少与Squarespace全局样式的冲突。

内容的提问来源于stack exchange，提问作者Fehzan