javascripthtmlcssgradientradial-gradients

How to create a circle radial gradient with custom size and position in CSS

I'm currently trying to recreate a rock paper scissors game using HTML CSS & JS Everything is going well, except the design of the buttons. I have no idea how to create a radial gradient like the one below. Any help is appreciated

Image of the button that needs to be replicated

Solution

  • This could be achived with a combination of border,box-shadow and a inset box-shadow

    I've added a little snippet below to illustrate my solution

    html {
  background-color: #999;
}

body {
  margin: 0;
  padding: .5rem;
}

.choices {
  display: flex;
  flex-direction: row;
  gap: 2rem;
}

.wrapper {
  background-color: #e3e3e5;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  border: 0.5rem solid #dc3550;
  box-shadow: inset 0 0.125rem 0 1px rgb(64 64 64 / 25%), 0 0.25rem 0 0px rgb(162 21 47);
  cursor: pointer;
  user-select: none;
  transition: box-shadow .125s, margin .125s;
}

.wrapper:hover {
  background-color: #efd6c0;
}

.wrapper:active {
  margin-top: .25rem;
  box-shadow: inset 0 0.125rem 0 1px rgb(64 64 64 / 25%);
}
    <div class="choices">
  <div class="wrapper">
    <!-- could be an svg for your fist, scissor or paper or even an img with a fixed width and height -->
    F
  </div>
  <div class="wrapper">
    <!-- could be an svg for your fist, scissor or paper or even an img with a fixed width and height -->
    S
  </div>
  <div class="wrapper">
    <!-- could be an svg for your fist, scissor or paper or even an img with a fixed width and height -->
    P
  </div>
</div>