Why is my button not turning into a circle? HTML, CSS

Coding Help
,
1 
.example_b {
        color: #fff !important;
        text-transform: uppercase;
        text-decoration: none;
        background: #60a3bc;
        padding: 1px;
        border-radius: 50%;
        display: block;
        border: none;
        transition: all 0.4s ease 0s;
        margin-left: 1775px;
        margin-top: 30px;
        font-size: 32px;
        width: 60px;
      }
    </style>

    <style>
      .example_b:hover {
        text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
        -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
        -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
        transition: all 0.4s ease 0s;
        margin-left: 1775px;
        margin-top:  30px;
        }
      }

The CSS for the button.

The HTML:

<div class="button_cont" align="center">
      <a
        class="example_b"
        onclick="window.location.reload()"
        target="_blank"
        rel="nofollow noopener"
        >⟳</a
      >
    </div>

How it looks:

image

I want it to be more of a circle,

Thanks!

2

The border-radius should be 100%. Sorry if I gave you that (:

3

Changing it to 100% didn’t do anything

4

try adding
width: 60px
height: 60px

5

That worked but now it looks like this:

image

6

Can I take a look at your project?

7

CSS

 .example_b {
        color: #fff !important;
        text-transform: uppercase;
        text-decoration: none;
        background: #60a3bc;
        padding: 1px;
        border-radius: 100%;
        display: block;
        border: none;
        transition: all 0.4s ease 0s;
        margin-left: 1775px;
        margin-top: 30px;
        font-size: 32px;
        width: 60px;
        height: 60px;
      }
    </style>

    <style>
      .example_b:hover {
        text-shadow: 0px 0px 6px rgba(255, 255, 255, 1);
        -webkit-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
        -moz-box-shadow: 0px 5px 40px -10px rgba(0, 0, 0, 0.57);
        transition: all 0.4s ease 0s;
        margin-left: 1775px;
        margin-top:  30px;
        }
      }

HTML

<div class="button_cont" align="center">
      <a
        class="example_b"
        onclick="window.location.reload()"
        target="_blank"
        rel="nofollow noopener"
        >⟳</a
      >
    </div>
8

Sorry, I don’t know how to help :frowning:

9

Send me an invite link in my DMs and I’ll hop in and see what I can do :wink:

10

It seems like you want to center the text - I usually but the text inside of a div and then center that div inside of a button. Something like this:

HTML

<button type="button" onclick="alert('Hello world!')">

      <div>I AM CENTERED</div>

</button>

CSS

button {
width: 100px;
height: 100px;
border-radius: 50%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
}

That way, the centering styles apply to the div and make the text centered without stretching the button oddly.
In any case, it’s good you’re seeing this error - I just updated my browser (Opera 70) and it seems like the automatic styling centers text inside of buttons.