Challenges with CSS to make a round button-CodePudding

I want the button to be round. The before should fill the button with centre of the button as radius. I mean the background should fill the button on hover like a fast moving minute hand on a wall clock. Also in this code, the before falls outside of the button. What should I do to control before item inside the button itself?

body {
  background-color: rgb(183, 216, 188);
}

button {
  width: 140px;
  height: 45px;
  font-size: 23px;
  cursor: pointer;
  border: none;
  outline: none;
  \\background: transparent;
  color: rgb(197, 150, 150);
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  position: absolute;
  transition: all 0.5s;
  z-index: 1;
  border-radius: 10%;
}

button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: rgb(235, 188, 188);
  z-index: -1;
  transition: all 0.5s ease-in-out;
  transform: rotate(95deg);
  transform-origin: 50% 50%;
  transform-style: flat;
}

button:hover::before {
  width: 90%;
}

button:hover {
  color: rgb(194, 26, 26);
}

button:active::before {
  background: #170bbb;
}

<button> Button
</button>

CodePudding user response：

For that you might need a change in html as well. I have added html with 3 inner divs. 1 div is to show the text, another 2 are to fill one by one.

See the Snippet below:

body {
  background-color: rgb(183, 216, 188);
}
#button {
  width: 100px;
  height: 100px;
  margin: 30px auto;
  position: relative;
  border: 1px solid rgb(194, 26, 26);
  border-radius: 50%;
  background-color: rgb(235, 188, 188);
}
.text{
  position:absolute;
  width: 100%;
  text-align:center;
  line-height: 100px;
  z-index: 5;
  cursor: pointer;
  font-family: "Calibri";
  color: rgb(194, 26, 26);
}
.half {
  position: absolute;
  width: 100%;
  height: 100%;
  clip: rect(0px, 100px, 100px, 50px);
  border-radius: 100%;
  
}
.fill{
  background-color: rgb(194, 26, 26);
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  clip: rect(0px, 50px, 100px, 0px);
}
#button:hover .left .fill {
  z-index: 1;
  animation: left 1s linear both;
}
@keyframes left {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes left {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
.right {
  z-index: 2;
  transform: rotate(180deg);
}
#button:hover .right .fill {
  z-index: 3;
  animation: right 1s linear both;
  animation-delay: 1s;
}
@keyframes right {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}
@-webkit-keyframes right {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(180deg);
  }
}

<div id='button'>
  <div class="text">Button</div>
  <div class='half right'>
    <div class='fill'></div>
  </div>
  <div class='half left'>
    <div class='fill'></div>
  </div>
</div>

See the fiddle