EN
CSS - how to create bean button?
1
answers
3
points
How can I create a bean button?
I was trying border-radius property with percentage value like 30% or 50% but it makes ellipse.
My code:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.bean-button {
padding: 10px 20px;
border: none;
border-radius: 50%; /* doesn't work */
background: #3085d6;
font-weight: bold;
color: white;
}
</style>
</head>
<body>
<button class="bean-button">Click me!</button>
</body>
</html>
I need something like this:
1 answer
3
points
You shouldn't use percentage values with border-radius property.
Quick solutions:
Set
border-radiusproperty value to:
50%(or more) of button'sheightusing some unit of:px,em,rem, etc,
e.g.
forheight: 50pxborder-radius: 25px
forheight: 10emborder-radius: 5em
forheight: 10remborder-radius: 5rem
etc.- very big value using some unit of:
px,em,rem, etc,
e.g.1000px,500remor500rem,
Practical example:
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<head>
<style>
.bean-button {
padding: 10px 20px;
border: none;
border-radius: 1000px; /* <--- makes button in bean shape */
background: #3085d6;
font-weight: bold;
color: white;
}
.bean-button:hover {
background: #3b8cd8;
}
</style>
</head>
<body>
<button class="bean-button">Click me!</button>
</body>
</html>
Reerences
0 comments
Add comment