Блог

Я хочу создать значок профиля, который будет использоваться в качестве выпадающего списка. Я попробовал это:

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

Добавьте следующие css-селекторы в кнопку profile :

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