Html button css border radius

Содержание

Circle button css
13 Answers 13
How to create a Button with Rounded Corners using CSS
Adding Rounded Corners to Buttons
Categories
Round Buttons

Circle button css

I’m a beginner and very confused, as a div tag when I give the same width and height with border-radius: 50% it always becomes circle. but with the tag a in case I want to make a circle button, It doesnt work that way. This is when I try to make a circle border button clickable.

13 Answers 13

For div tag there is already default property display:block given by browser. For anchor tag there is not display property given by browser. You need to add display property to it. That’s why use display:block or display:inline- block . It will work.

.round-button < width:25%; >.round-button-circle < width: 100%; height:0; padding-bottom: 100%; border-radius: 50%; border:10px solid #cfdcec; overflow:hidden; background: #4679BD; box-shadow: 0 0 3px gray; >.round-button-circle:hover < background:#30588e; >.round-button a

.round-button < display:block; width:80px; height:80px; line-height:80px; border: 2px solid #f5f5f5; border-radius: 50%; color:#f5f5f5; text-align:center; text-decoration:none; background: #555777; box-shadow: 0 0 3px gray; font-size:20px; font-weight:bold; >.round-button:hover

Here is a flat design circle button:

but the problem is that the + might not be perfectly centered vertically in all browsers / platforms, because of font differences. see also this question (and its answer): Vertical alignement of span inside a div when the font-size is big

For a modern CSS approach, we now have a few tools like aspect-ratio and grid to create perfect circle buttons like so:

 aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;

Setting fixed height and width on an inline element (i.e an a tag) has no effect. Like mentioned by the others, we need to set the display property to a block element. Using grid allows easy centering and generally more control of the content inside the button.

All together with some optional padding and centering:

(Leaving the red border because OP had it on there)

This is now compatible with almost all browsers (now that IE is sunset). Of course your project may not allow such modernity but it is nice to start using this stuff when we can.

Источник

How to create a Button with Rounded Corners using CSS

In CSS3 you can give elements rounded corners with the border-radius property. Let’s look at an example of this.

Suppose you have the following markup.

To make the div visible, we’ll set its width and height and give it a background color of red.

.red_div   background-color: red;  width: 200px;  height: 100px; >

The following is the resulting output of the above.

To make the div’s borders rounded, you could add the following styling:

The above sets a 15 pixel radius on the top-left, top-right, bottom-left and bottom-right corners of the element. The higher the value of the radius, the more rounded the edge becomes.

Below you can see the result of the above markup.

The border-radius property can be written in several ways.

Specifying one value for the property will set all four edges of the element to a radius of that value.

With two values, the first will be applied to the top-left and bottom-right corner while the second is applied to the top-right and bottom-left corners

border-radius: 15px 15px 15px;

With three values, the first will be used for the top-left corner, the second value for the top-right and bottom-left corners, and the third value will be applied to the bottom-right corner.

border-radius: 15px 15px 15px 15px;

The above explicitly sets a value for each edge. The above is a shorthand for the below CSS, which also eplicitly gives a value for each edge.

border-top-left-radius: 15px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; border-bottom-left-radius: 15px;

In the example we’ve looked at, we set the same value for all edges. You can of course set different values for each edge if you so wish.

Adding Rounded Corners to Buttons

border-radius can be used on other elements as well. Below, we see it used to add rounded corners to a button.

button   width: 200px;  height: 100px;  border-radius: 20px; >

The button will look like this:

Here are some more examples of complete buttons

Round Buttons

CSS provides a handy property of border-radius, that lets us create round corners for our elements. This brief article will demonstrate how to build aesthetic rounded buttons.

Let’s create a button with an edit icon.

Let’s give it a pleasant color, spacing, and a subtle shadow.

Let’s make our button a perfect circle by applying a border-radius of at least 50%.

There we go. Let’s give it realistic hover and active state effects with a gentle transition.

Let’s change the background color and box-shadow placement when the button is pressed. On top of these, adding a y-axis translate creates a realistic keypress effect.

button.round:hover < background-color: #65b9e6; >button.round:active

And our button is complete. Try clicking on it!

Here is a catalog of buttons with different border radii.

* < font-family: sans-serif; >.parent < display: flex; flex-direction: column; align-items: center; >button < background-color: #48abe0; color: white; border: none; padding: 5px; font-size: 31px; height: 130px; width: 130px; box-shadow: 0 2px 4px darkslategray; cursor: pointer; transition: all 0.2s ease; >button:hover < background-color: #65b9e6; >button:active < box-shadow: 0 0 2px darkslategray; transform: translateY(2px); >button < margin-bottom: 10px; >.round-1 < border-radius: 5%; >.round-2 < border-radius: 10%; >.round-3 < border-radius: 20%; >.round-4 < border-radius: 30%; >.round-5 < border-radius: 40%; >.round-6

Here are some more examples.

A collection of rounded buttons.

See the Pen Rounded buttons by Elena Scherer (@eksch) on CodePen.

Rounded buttons with several hover effects.

Simple rounded button with a fancy hover effect.

UnusedCSS helps website owners remove their unused CSS every day. See how much you could save on your website: