User:Wanderer/Control buttons

.xbox-a-button,
.xbox-b-button,
.xbox-x-button,
.xbox-y-button {
  display: inline-block;
  border: 1px solid black;
  width: 22px;
  height: 22px;
  text-align: center;
  vertical-align: 0px;
  border-radius: 12px;
  box-shadow: inset 1px 1px 1px -0.5px white, inset 0px 0px 12px 0px rgba(0, 0, 0, 0.7);
  font-family: Verdana, Arial;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.7);
}

.xbox-a-button {
  color: #C4DA17;
  background-color: #9AAB37;
}

.xbox-b-button {
  color: #FE5805;
  background-color: #EA5402;
}

.xbox-x-button {
  color: #96B5EB;
  background-color: #7083E0;
}

.xbox-y-button {
  color: #FABA01;
  background-color: #F1B101;
}

.xbox-lb-button,
.xbox-rb-button {
  display: inline-block;
  border: 1px solid black;
  border-radius: 7px;
  height: 12px;
  width: 22px;
  text-align: center;
  vertical-align: middle;
  padding: 0px;
  background-image: linear-gradient(to right, #DADADA, #6C6C6C);
}

.xbox-lb-button > span,
.xbox-rb-button > span {
  position: relative;
  top: -4px;
  font-family: Verdana, Arial;
  font-size: 12px;
  color: black;
}

<span class="xbox-a-button">A</span>
<span class="xbox-b-button">B</span>
<span class="xbox-x-button">X</span>
<span class="xbox-y-button">Y</span>
<span class="xbox-lb-button"><span>LB</span></span>
<span class="xbox-rb-button"><span>RB</span></span>

A B X Y LB RB

.playstation-x-button, 
.playstation-c-button, 
.playstation-s-button, 
.playstation-t-button {
  display: inline-block;
  border: 1px solid black;
  width: 22px;
  height: 22px;
  text-align: center;
  border-radius: 12px;
  margin: 0px;
  padding: 0px;
  background-image: radial-gradient(circle at 8px 8px, #9199A6 0%, #020303 100%);
  box-shadow: inset 1px 1px 1px 0px white;
}

.playstation-x-button > span {
  color: #9999FF;
  font-size: 16px;
  position: relative;
  top: 0px;
}

.playstation-c-button > span {
  color: #FF6666;
  font-size: 18px;
  position: relative;
  top: 2px;
}

.playstation-s-button > span {
  color: #FF66FF;
  font-size: 21px;
  position: relative;
  top: 2px;
}

.playstation-t-button > span {
  color: #66FF66;
  font-size: 21px;
  position: relative;
  top: 0px;
}

.playstation-l1-button,
.playstation-r1-button,
.playstation-l2-button,
.playstation-r2-button {
  display: inline-block;
  background-color: #7C879B;
  border: 1px solid black;
  text-align: center;
  height: 12px;
  width: 22px;
  margin: 5px 0px;
  padding: -5px 0px 5px 0px;
  border-radius: 12px 12px 0px 0px / 6px 6px 0px 0px;
}

.playstation-l1-button > span,
.playstation-r1-button > span,
.playstation-l2-button > span,
.playstation-r2-button > span {
  color: white;
  font-family: Verdana, Arial;
  font-size: 12px;
  position: relative;
  top: -4px;
}

<span class="playstation-x-button"><span>&#9587;</span></span>
<span class="playstation-c-button"><span>&#9711;</span></span>
<span class="playstation-s-button"><span>&#11036;</span></span>
<span class="playstation-t-button"><span>&#9651;</span></span>
<span class="playstation-l1-button"><span>L1</span></span>
<span class="playstation-r1-button"><span>R1</span></span>
<span class="playstation-l2-button"><span>L2</span></span>
<span class="playstation-r2-button"><span>R2</span></span>

╳ ◯ ⬜ △ L1 R1 L2 R2