动态HTML/CSS按钮

我的按钮有问题，我是HTML和CSS的初学者，但我需要一个uni项目，至少在头版。我想让它变得漂亮，我想让我的按钮在你悬停在上面时“移动”分开

最好的解释是，当你将鼠标移到一个按钮上时，它会缩放，其他按钮会向右或向左移动以保持边距，这样它们就不会互相溢出

我尝试过使用溢出、填充和边距：在大小之前：之后（但对于%来说，它会破坏一切），我尝试坚持%的值，因为有人告诉我，这些值使网站对不同的屏幕大小更敏感

以下是HTML部分：

A.
B
C
D

下面是CSS：

正文{
显示器：flex；
弯曲方向：立柱；
高度：93vh；
证明内容：中心；
对齐项目：居中；
背景：#222；
颜色：#eee；
}
#钮扣垫{
显示器：flex；
证明内容：周围的空间；
宽度：50%；
}
钮扣{
宽度：100%；
保证金：5px；
}
.主按钮{
字体系列：“Raleway”，无衬线；
字号：28px；
字号：800；
位置：相对位置；
背景：无；
颜色：rosybrown；
边界：0.2米实心玫瑰色；
填充物：0.5em 1em；
转型：转型。4s轻松；
}
.主按钮：悬停{
转换：比例（1.3）；
}

也在工作

---

我不确定该尝试什么，因为我的HTML/CSS知识非常基础。

如果我理解，您将使用以下代码解决您的问题：

.main-button {
  font-family: 'Raleway', sans-serif;
  font-size: 28px;
  font-weight: 800;
  position: relative;
  background: none;
  color: rosybrown;
  border: 0.2em solid rosybrown;
  padding: 0.5em 1em;
  transition: all .4s ease;
}
    .main-button:hover {
      transform: scale(1.3);
      margin: 0 20px;
    }

---

我认为它看起来还可以，否则它会移动太多，太吵

我会将此添加到您的悬停状态：

.main-button:hover {
  transform: scale(1.3);
  background: #222;
  z-index:1;
  box-shadow: 0px 0px 2px #333;
}

---

另外：您可以移动到.main按钮中的.button中的每个样式这里有一种方法，将按钮之间的边距精确保持在5px，并在不同的屏幕大小上工作。它不使用transform的

scale（）

，而是将一些值（如

padding

和

font size

）增加1.3倍。请注意，效果与原始效果略有不同，因为动画并非完全集中在按钮上，最外面的按钮尤其明显。我无法解决这个问题，但这个解决方案可能仍然适用于您

正文{
显示器：flex；
弯曲方向：立柱；
高度：93vh；
证明内容：中心；
对齐项目：居中；
背景：#222；
颜色：#eee；
}
#钮扣垫{
显示器：flex；
证明内容：周围的空间；
宽度：50%；
}
钮扣{
宽度：100%；
身高：88%；
保证金：5px；
}
.主按钮{
字体系列：“Raleway”，无衬线；
字号：28px；
字号：800；
字体大小：200%；
位置：相对位置；
背景：无；
颜色：rosybrown；
边界：0.2米实心玫瑰色；
填充物：0.5em 1em；
过渡：全部。4s轻松；
}
.主按钮：悬停{
填充：0em 1em；
宽度：130%；
身高：130%；
字号：260%；
转化：translateY（-15%）；
}

A.
B
C
D

在较大的窗口尺寸上，仍然会出现重叠，并且边距不会保持不变。您可以更改间距大小，我只是想展示一种方法。确切地说，他需要根据窗口大小设置正确的px s。您可以使用%px，平均示例：

margin:04%

解决了这个问题，这正是我需要的，但constantin使它更具响应性，谢谢您的输入！这听起来像是一个浏览器问题。Opera似乎在不使用任何css的情况下首先渲染整个页面，然后使用应用的css重新渲染。这是一个更好的解决方案，使其响应更快，非常感谢！与下面的解决方案相同的问题是，如何删除加载的白色默认按钮，该按钮使其看起来像im闪烁按钮inI无法重现该效果，无论是在SP上的代码段中，还是在codepen上。我试过Firefox和Chrome（Windows）。它只在过渡期（0.4s）编辑时出现：我正在运行opera，不确定这是否重要，按住F5会让它一直在屏幕上。还是不确定原因