Jump to navigation
Jump to search
.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>╳</span></span> <span class="playstation-c-button"><span>◯</span></span> <span class="playstation-s-button"><span>⬜</span></span> <span class="playstation-t-button"><span>△</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