I am building a webapp and I want to modify one of the StarCraft menu buttons to add them to my webapp, (StarCraft is a Blizzard Entertainment Game). This is an example photo of one of the menu pages from the game from which I would love to recreate the OK button in HTML/CSS:


Unfortunately, I cannot find a website that has code for such buttons. Is there a place where I can find HTML and CSS code that create the OK button from the above photo?

Thank you very much


2 Answers 2


I know it's three years late, but I've made the buttons in CSS and you can find them on my Github. Essentially it's a gradient 180-degree simple button with a bordered photo that I took from Blizzard's "Starcraft 2" website. I dug through their CSS for a long time to find it, but the buttons look awesome. Link here: https://github.com/brysonrhawkins/starcraftButtonCSS


Those buttons can be achieved with multiple gradient backgrounds and borders, drop shadows and box shadows.

Here's an example:


The tutorials and examples for Metallic buttons explain the process and give examples. However, none of them are as heavily shadowed, highlighted and saturated as your Starcraft examples. You will have to increase the effects, or just draw the buttons in a graphics program like Illustrator.

The emphasis is on subtlety in web design these days. You'll have to push the css rules to get it as loud as video game interface.

  • thank you. Actually since I cannot become a web designer now that I am old, I think I could try to draw it Commented Sep 14, 2017 at 16:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.