Microsoft’s Fluent Design moves at disappointing adoption speeds, and, for the time being, we can only have a glimpse of it on certain apps and components. One of them is the Calculator, which has a nice effect that caught my eye: when you hover on a button, a subtle cross appears on the corner that is closer to your cursor.
Spaces and gradients
Showing the cross was the easy part. First, we need to build a simple grid of items with some horizontal spacing between them, using Flexbox and
justify-content: space-between;. The vertical spacing between the entries could be done with the proper
margin-bottom on each entry.
The cross itself can be a rectangle of a lighter background compared to the container, drawn as a
::before pseudo-element within each entry, having half of its surface outside the hovered entry. To visualize it, it should be something like that:
To prevent the rectangle from overlapping the entries’ content, we need to give both the entry and the container a higher
Finally, we need to smoothen its edges, to make it look like the tips of a Christmas star instead of two solid lines. To do so, we must apply some radial-gradient() to its background, starting from some solid color and ending to transparency. Then, we end up with something like that:
Detecting the corners
<div class="entry"> <div class="entry-content">The entry's actual content</div> <div class="corner-container"> <span class="corner"></span> <span class="corner"></span> <span class="corner"></span> <span class="corner"></span> </div> </div>
Then, we use some simple CSS to put each corner to its right place, so underneath the content, it would be something like that:
Then, we need to do two things: First, to put our pseudo-element (the one with the rectangle) on each corner. The top left corner should display its rectangle at the top left, the top right at the top right and so on.
Second, we need to bring the
.content-container element in front of the corners, to hide the pseudo-element, which should only be visible between the gaps.
Here is the tricky part, though: on the one hand, we want to have the content container above the corners, to hide them, but at the same time, we want to be able to hover on each corner. Those two are mutually exclusive, as the overlapping container will prevent our cursor from detecting the corners.
Hover through an element, with pointer-events: none;
Luckily, there is a workaround for that, too. Setting
pointer-events: none; on an element, keeps it visible on the screen, but when it comes to interactions, it is as if it isn’t even there. You can’t click on it; you cannot select its contents, and you can’t even hover it. Basically, you click and hover through that element, reaching what is underneath.
And there goes the hard part. The rest is just some simple and straightforward CSS, to apply some nice styling and a smooth transition, before ending up with the final result:
.entry to an
<a> element instead of a
In any case, it was a fun experiment.
If you like this article, you might also want to check out some more frontend tips.