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; } &lt;span class="xbox-a-button"&gt;A&lt;/span&gt; &lt;span class="xbox-b-button"&gt;B&lt;/span&gt; &lt;span class="xbox-x-button"&gt;X&lt;/span&gt; &lt;span class="xbox-y-button"&gt;Y&lt;/span&gt; &lt;span class="xbox-lb-button"&gt;&lt;span&gt;LB&lt;/span&gt;&lt;/span&gt; &lt;span class="xbox-rb-button"&gt;&lt;span&gt;RB&lt;/span&gt;&lt;/span&gt;

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; } &lt;span class="playstation-x-button"&gt;&lt;span&gt;&amp;#9587;&lt;/span&gt;&lt;/span&gt; &lt;span class="playstation-c-button"&gt;&lt;span&gt;&amp;#9711;&lt;/span&gt;&lt;/span&gt; &lt;span class="playstation-s-button"&gt;&lt;span&gt;&amp;#11036;&lt;/span&gt;&lt;/span&gt; &lt;span class="playstation-t-button"&gt;&lt;span&gt;&amp;#9651;&lt;/span&gt;&lt;/span&gt; &lt;span class="playstation-l1-button"&gt;&lt;span&gt;L1&lt;/span&gt;&lt;/span&gt; &lt;span class="playstation-r1-button"&gt;&lt;span&gt;R1&lt;/span&gt;&lt;/span&gt; &lt;span class="playstation-l2-button"&gt;&lt;span&gt;L2&lt;/span&gt;&lt;/span&gt; &lt;span class="playstation-r2-button"&gt;&lt;span&gt;R2&lt;/span&gt;&lt;/span&gt;

&#9587; &#9711; &#11036; &#9651; <span style="  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; "><span style="   color: white;   font-family: Verdana, Arial;   font-size: 12px;   position: relative;   top: -4px; ">L1 <span style="  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; "><span style="   color: white;   font-family: Verdana, Arial;   font-size: 12px;   position: relative;   top: -4px; ">R1 <span style="  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; "><span style="   color: white;   font-family: Verdana, Arial;   font-size: 12px;   position: relative;   top: -4px; ">L2 <span style="  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; "><span style="   color: white;   font-family: Verdana, Arial;   font-size: 12px;   position: relative;   top: -4px; ">R2