3D Keyboard Key on CSS

Introduction


People use their gadgets every day. And the main attribute of any gadget is a keyboard. But have you ever thought about creating a keyboard that would display on your screen?

In this article, we will create a 3D Keyboard Key with awesome animation after clicking on it. And yes, we will not use any programming language. Our key will be on the power of CSS! Let’s get started!

image

Implementation


At first, we need to create a HTML layout. It’s just simple.

<div class="container">
  <div class="key">
    1
  </div>
</div>

Okay, It’s great. We have a layout for our key “1”. Now we need to add CSS styles. For better key display we will add styles for the .container class.

.container {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Now our key will be at the center of our page. Let’s add CSS for the key.

.container .key {
  position: relative;
  
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100px;
  height: 100px;
  padding: 4px 7px;
  font-size: 4rem;
  color: #ffffff;
  background-color: #495057;
  border-radius: 10px;
  cursor: pointer;
}

It will look so:

Key with CSS

But we also need to add the 3D effect (because I wrote about it in the title). In order to do so, we will add one CSS property. It’s box-shadow. Let’s add it to the .key class.

box-shadow: 
   5px 5px 0 rgba(73, 80, 87, 0.8), 
   inset -2px -2px 10px #131313;

The first value of box-shadow 5px 5px 0 rgba(73, 80, 87, 0.8) adds an external shadow. And inset -2px -2px 10px #131313 adds internal shadow. It’s great! Let’s look at the result:

image

Not bad, not bad. But I also promised you that we would add a key down effect after mouse click on the key. Let’s make it!

.container .key:active {
  box-shadow: 
     3px 3px 0 rgba(73, 80, 87, 0.8), 
     inset -7px -7px 10px #131313;
  transform: translate(2px, 2px);
  transition: 0.2s;
}

We use pseudo-class :active to add this effect. Also, you need to pay attention to changes in box-shadow and adding the transform property.
At first, transform: translate(2px, 2px) moves our key by 2 pixels on the X-axis and 2 pixels on the Y-axis. It is the template: transform: translate(X-axis, Y-axis).
Secondly, we just change the value of the box-shadow that it stays fixed. We need to subtract the X-axis and Y-axis translate values from the X-axis and Y-axis offset values of the box-shadow. Just simple mathematics:

For the X-axis:
5px (box-shadow) — 2px (transform: translate) = 3px.
And the same is for the Y-axis.
And thirdly, transition: 0.2s adds smooth to our effect.
It will look so:

Active key

Just compare it with inactive variant:

image

It’s great, isn’t it? And, as the last part, for the best display of our key, we just need to add extra symbol. It is “!” for the key “1”.

We just will add one tag span in HTML with class .extra inside the class .key.

<div class="key">
    1 <span class="extra">!</span>
</div>

And we need some CSS for the correct display of it inside the key “1”.

.key .extra {
  position: absolute;
  top: 10%;
  left: 15%;
font-size: 2.5rem;
}

It is worth noting that position: absolute works correctly if we will add position: relative to the parent of the .extra class, i.e. the .key class.
The result:

image

Yes, we finished it! Congratulations! If you want to check the full code of our tutorial you can check it on CodePen.

More usable content


It is my first article on Habr but I also publish fascinating articles on Medium. It would be if you check my articles and write some feedback in the comments.

Medium: https://medium.com/@maxim_filanovich

You receive interesting and cognitive material if you will subscribe to Habr and follow me on Medium.

If you have questions or you interested in my articles, you can check and subscribe on my social media:

Twitter
GitHub
Telegram
VK

Similar posts

AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 4

    0

    Image before topic cut is misleading. It's literally "expectation" and "reality" meme.

      0
      It's just a preview image, nothing more. I agree with you that it has a part of untruth. But I hadn't even thought to deceive somebody.
      Now I am looking at this preview image and I got an idea to create these buttons like on the preview. Just thank you for your comment and this useful remark.
      I will send the new article with buttons like on the preview image to moderation to the end of this week.
      0
      great, you have explained everything step-by step. it will be very useful for the beginners.
        0
        Thank You for your comment! I glad to see that my article helps others understand CSS.

      Only users with full accounts can post comments. Log in, please.