我的按钮有问题，我是 HTML 和 CSS 的初学者，但我需要它用于大学元素，至少是首页。我试图让它变得漂亮，并且当您将鼠标悬停在按钮上时，我想让按钮“移动”分开。
最好的解释是，当您将鼠标悬停在按钮上时，它会缩放，其他按钮将向右或向左移动以保持边距，这样它们就不会相互溢出。
我尝试过使用溢出、填充和边距:之前:之后尺寸(但对于 % 它只会破坏一切)我试图坚持使用 % 值，因为我被告知这些值使网站对不同的屏幕尺寸。
这是 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 知识非常基础。
最佳答案
如果我理解，您将使用以下代码解决您的问题:
.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;
}
关于html - 动态 HTML/CSS 按钮，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58201962/