DEV Community

Cover image for Counter-Strike 2 Button
Eduard Constantin
Eduard Constantin

Posted on

Counter-Strike 2 Button

Impatiently waiting for what felt like an eternity, I finally gained access to Counter-Strike 2 beta.🎮

The game's new UI is nothing short of spectacular, but one element in particular caught my eye — the matchmaking button, especially the the background animation

CS2 matchmaking button

Determined to take on a creative challenge, I set myself a goal for this month - to recreate this button for the web with CSS and animate it with framer motion.

Creating the animated squares was a breeze, but it was the topographic map did gave me some headaches because I didn't want to use just a simple image.

After some relentless tinkering and experimentation I managed to generate the map dynamically using an SVG filter, therefore offering endless variations for this button. As you can see bellow, there are more things implemented, like changing the color (it looks mesmerizing in blue), the width and the label.

CT and T buttons

The code for this project is available on GitHub: https://github.com/eduardconstantin/react-motion-components

And I also set up a story playground here

Top comments (3)

Collapse
 
hrantors22 profile image

Good post! Counter-Strike 2 has definitely brought some exciting changes to the franchise! As someone who has been playing CS:GO for quite some time, diving into CS 2 has been a refreshing experience. The gameplay tweaks and enhancements really add to the overall excitement. Plus, being a fan of skin collecting, I've found the variety in CS 2 to be quite enticing. If you're into skin collecting like me, I recommend checking out an article From the link I stumbled upon about making money through skin trading. It's a fascinating read for anyone looking to delve deeper into this aspect of the game.

Collapse
 
_eduard26 profile image
Eduard Constantin •

Thank you!

Collapse
 
busyboy11 profile image
Deanna C. Darling •
Comment hidden by post author

Some comments may only be visible to logged-in visitors. Sign in to view all comments. Some comments have been hidden by the post's author - find out more

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →