8 CSS Snippets for Creating Interactive Web Elements

For many years, interactivity on the web has meant using JavaScript. Whether it’s vanilla JS or a library such as jQuery or React, the language has been the gateway to building elements that users can interact with.

And while JavaScript is still very useful in these scenarios – it’s no longer a requirement. These days much can be accomplished with a combination of HTML and CSS. Each standard has been extended to include features that were once exclusive to other languages.

This evolution brings several benefits. First, it greatly reduces the complexity of building these elements. You don’t need to load external libraries or worry about mastering JavaScript syntax. In turn, that also boosts performance and ensures browser compatibility.

Sound interesting? Today, we’ll show you a handful of common interactive elements that you can build with nothing but HTML and CSS.

Accordion UIs

Accordions have long been built with an assist from JavaScript. The jQuery UI library even includes the element. This simplified the creation and styling processes, but it’s not the most performant code.

Especially when you consider that HTML now has the details and summary tags built in. With some basic markup and styling, it’s possible to create an attractive and functional UI. It’s also compatible with all major browsers.

It’s worth mentioning that this method doesn’t offer the full range of special effects. As MDN notes:

Unfortunately, at this time there’s no built-in way to animate the transition between open and closed.

Minus that caveat, this is very much a viable alternative to loading a JavaScript library.

Below is a basic example of what can be done with just a few lines of HTML and CSS.

A Simple HTML Accordion Using <details> by Eric Karkovack

See the Pen A Simple HTML Accordion Using <details> by Eric Karkovack

Advanced Navigation Menus

Crafting navigation that works across browsers and devices used to be quite a challenge. Particularly when creating multi-level or mega menus. Advanced features often required fallbacks to keep things working on legacy browsers.

And that’s not even taking small screens into account. An entirely separate menu may need to be implemented to ensure ease of use on mobile devices.

Thankfully, there’s been much progress in this area. By combining the HTML nav tag, unordered lists, and CSS, we can support the full spectrum of devices. Not only can they look just as good as the JavaScript-heavy menus of the past, but they can also perform more efficiently.

Responsive Mega Menu & Dropdown Menu Using Only HTML & CSS by Muhammad Fadzrin Madu

See the Pen Responsive Mega Menu and Dropdown Menu using only HTML & CSS by Muhammad Fadzrin Madu

Games

Web-based games have been around for a long time – dating back to the days of (gulp!) Flash. And even after that platform’s demise, the process of building them was still complex.

Creating smooth animations, processing mathematical calculations, and allowing for user input have traditionally required advanced scripting and library usage. But that’s not necessarily the case anymore.

Now, CSS can be combined with the likes of HTML canvas, SVG, and other goodies to create some surprisingly-powerful results. While you won’t mistake these pure CSS games for the cutting-edge titles playing on your console, they’re impressive nonetheless.

At the very least, they make for compelling time-wasters!

Pure CSS Ghost Bustin’ Game with CSS Variables by Jhey

See the Pen Pure CSS ghost bustin’ game w/ CSS variables 👻🕹#CodePenChallenge by Jhey

Media Players

Much like games, multimedia on the web was once browser-plugin territory. Some of that was due to proprietary formats, as vendors vied to gain market share for their codecs. Content providers (and thus, designers) were forced to choose one or more formats to make available to users. And users needed to have the right software installed to play the media. It was a mess.

But even as formats such as MP4 became open standards, playback remained complex. However, a shift to HTML5 put much of the functionality burden on browsers. The video and audio elements make use of a built-in media player with a variety of optional features.

And while JavaScript is still recommended for a more customized UI, it’s no longer a necessity. Some basic styling can be accomplished with CSS. Plus, browser compatibility for the native elements is robust.

HTML5 Audio CSS Style by Dani Castaños

See the Pen HTML5 Audio CSS style by Dani Castaños

Building the Basics and Beyond

Advancements in CSS and HTML have done wonders for pushing the web forward. No longer do we need to resort to massive code libraries or overly-complicated processes to deliver basic interactivity. These natively-supported staples are more than capable of doing the job.

That’s good news, as web designers need to account for an ever-growing array of devices. Elements such as navigation and media players that simply work without the need for third-party libraries are crucial to that cause.

Sure, JavaScript and the like are still there to take things to the next level. But it’s now possible to build the basics without them.