动态 HTML/CSS 按钮

Question

我的按钮有问题，我是 HTML 和 CSS 的初学者，但我需要它用于 uni 项目，至少是首页。我正在努力让它变得漂亮，我想让我的按钮 "move" 在你将鼠标悬停在按钮上时分开。

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

我试过使用溢出、填充和边距 :before :after 大小（但对于 % 它只会破坏一切）响应不同的屏幕尺寸。

这是 HTML 部分：

<html>

<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">
</head>

<body>

<div id="buttonstuff">
    <button onclick="location.href='http://example.com'" type="button" class="main-button">A</button>
    <button onclick="location.href='http://example.com'" type="button" class="main-button">B</button>
    <button onclick="location.href='http://example.com'" type="button" class="main-button">C</button>
    <button onclick="location.href='http://example.com'" type="button" class="main-button">D</button>
</div>

</body>
</html>

这里是 CSS:

body {
  display: flex;
  flex-direction: column;
  height: 93vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
}

#buttonstuff {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

button {
  width: 100%;
  margin: 5px;
}

.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: transform .4s ease;
}

.main-button:hover {
  transform: scale(1.3);
}

也在工作codepen

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

Answer 1

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

.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;
    }

Answer 2

我觉得还行，不然会动太多太吵

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

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

此外：.button 中的每个样式都可以移动到 .main-button

Answer 3

这是一种将按钮之间的边距精确保持在 5px 并适用于不同屏幕尺寸的方法。它不使用变换的 scale()，而是将 padding 和 font-size 等几个值增加 1.3 倍。请注意，效果与原始效果略有不同，因为动画并未完全位于按钮的中心，在最外面的按钮上尤其明显。我无法解决这个问题，但这个解决方案可能仍然适合你。

body {
  display: flex;
  flex-direction: column;
  height: 93vh;
  justify-content: center;
  align-items: center;
  background: #222;
  color: #eee;
}

#buttonstuff {
  display: flex;
  justify-content: space-around;
  width: 50%;
}

button {
  width: 100%;
  height: 88%;
  margin: 5px;
}

.main-button {
  font-family: 'Raleway', sans-serif;
  font-size: 28px;
  font-weight: 800;
  font-size: 200%;
  position: relative;
  background: none;
  color: rosybrown;
  border: 0.2em solid rosybrown;
  padding: 0.5em 1em;
  transition: all .4s ease;
}

.main-button:hover {
  padding: 0em 1em;
  width: 130%;
  height: 130%;
  font-size: 260%;
  transform: translateY(-15%);
}

<link href="https://fonts.googleapis.com/css?family=Raleway:400,800&display=swap" rel="stylesheet">

<div id="buttonstuff">
    <button onclick="location.href='http://example.com'" type="button" class="main-button">A</button>
    <button onclick="location.href='http://example.com'" type="button" class="main-button">B</button>
    <button onclick="location.href='http://example.com'" type="button" class="main-button">C</button>
    <button onclick="location.href='http://example.com'" type="button" class="main-button">D</button>
</div>

动态 HTML/CSS 按钮

Dynamic HTML/CSS Buttons

html

css

dynamic

button

responsive