将按钮设为圆形图标

Question

我想创建一个用作下拉菜单的个人资料图标。我试过这个：

App.js

export default function App() {
  return <button className="profile">Profile</button>;
}

样式

.profile {
  padding: 8px 20px;
  border-radius: 4px;
  outline: none;
  border: none;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
  background-color: #1888ff;
}

.profile:hover {
  padding: 6px 18px;
  transition: all 0.3s ease-out;
  background-color: transparent;
  color: #fff;
  border-radius: 4px;
  border: 2px solid #1888ff;
  transition: all 0.3s ease-out;
}

你知道我如何将按钮做成一个带有下拉菜单的圆圈吗？

https://codesandbox.io/s/epic-shamir-osu68

Answer 1

为profile按钮添加波纹管css选择器：

.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100px;
  width: 50px;
  height: 50px;
}