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:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.bean-button {7
padding: 10px 20px;8
border: none;9
border-radius: 50%; /* doesn't work */10
background: #3085d6;11
font-weight: bold;12
color: white;13
}14
15
</style>16
</head>17
<body>18
<button class="bean-button">Click me!</button>19
</body>20
</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:
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.bean-button {7
padding: 10px 20px;8
border: none;9
border-radius: 1000px; /* <--- makes button in bean shape */10
background: #3085d6;11
font-weight: bold;12
color: white;13
}14
15
.bean-button:hover {16
background: #3b8cd8;17
}18
19
</style>20
</head>21
<body>22
<button class="bean-button">Click me!</button>23
</body>24
</html>
Reerences
0 commentsShow commentsAdd comment
