时间戳

首页 > 解决方案 > 如何使用 html 和 less/css 制作完美弯曲的按钮？

html - 如何使用 html 和 less/css 制作完美弯曲的按钮？

问题描述

我正在尝试仅使用 less/css 和 html 使按钮完美弯曲，但我无法弄清楚如何使其完美弯曲而不是丑陋的 html（我认为）曲线。

我是怎么做的：

HTML

<div class = "scrollToTop">
    <button>up top</button>
</div>

少/CSS

@fullred: #FF0000;

.scrollToTop button {
.scrollToTop a button {
  scroll-behavior: smooth;
  background-color: @fullred;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  border-radius: 7%;
  margin: 1%;
}

}

我在做什么错？

标签： htmlcss

解决方案

使用相同的宽度和高度值，然后根据您的平滑度调整边框半径。首选边框半径应在 8-12% 之间

推荐阅读