How to Make Super Cool CSS3 Retro Style and Font 3D Buttons

How to Make Super Cool CSS3 Retro Style and Font 3D Buttons: BY Jose13 Nov,2020; Tags:
CSS3 3D CSS3 Button

Introduction

This time we will bring a 3D button based on CSS3, which has a retro style and font. The first button tilts to the left or right according to the position of the cursor when hovering, and its style is similar to that of an old game console. These buttons are configured with sm, md, lg size classes and bootstrap-esque classes, such as primary, secondary, dangerous, warning, success and info. The second button is a loader button, which will have its own progress bar when pressed. It only pushes towards the center, but then opens up, displaying a progress bar on its front. Depending on the success of the operation, it will display specific information when it is completed.

Instructions

HTML Body Code

<div class="wrapper">
  <div class="header-wrap">
    <h1>3D Retro Buttons</h1>
  </div>
</div>

<br/><br/>

<div class='wrapper'>
  <div role='button' class='retro-btn'>
    <a class='btn'> 
      <span class='btn-inner'>
        <span class='content-wrapper'>
          <span class='btn-content'>
            <span class='btn-content-inner' label='Retro Button'>
            </span>
          </span>
        </span>
      </span>
    </a>
  </div>
</div>

<div style="display: inline-block; width: 50px"></div>

<div class="wrapper">
  <button class="loader-button">Loader</button>
</div>

Css Code

body {
  color: #aaa;
  background-color: #2F2F2F;
  text-align: center;
  overflow-x: hidden;
}

#title {
  position: relative;
  margin: 70px auto 50px;
  font-size: 60px;
  font-family: 'Press Start 2P', cursive;
}

.wrapper {
  position: relative;
  display: inline-block;
  margin: 35px auto;
}

.header-wrap {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  text-align: center;
  font-size: 25px;
  font-family: 'Press Start 2P', cursive;
  transform: perspective(200px) rotateX(10deg);
  letter-spacing: .1em;
  user-select: none;
  text-shadow: 0 -1px 0 #fff, 0 1px 0 #004d40, 0 2px 0 #00483B, 0 3px 0 #004639, 0 4px 0 #004336, 0 5px 0 #004134, 0 6px 0 #003F32, 0 7px 0 #003D30, 0 8px 0 #003A2D, 0 9px 0 #00382B, 0 10px 0 #003528, 0 11px 0 #003225, 0 12px 0 #002F22, 0 13px 0 #002B1E, 0 14px 0 #00281C, 0 15px 0 #001F13, 0 22px 30px rgba(0, 0, 0, 0.9), 0 22px 30px rgba(0, 0, 0, 0.9), 0 22px 15px rgba(0, 0, 0, 0.9), 0 11px 15px rgba(0, 0, 0, 0.9), 0 15px 20px rgba(0, 0, 0, 0.9), 0 15px 11px rgba(0, 0, 0, 0.9), 0 16px 11px rgba(0, 0, 0, 0.9);
  transition: text-shadow .3s ease .3s,  transform .3s ease .3s, letter-spacing .3s ease .3s;
}
.header-wrap:hover {
  transition: text-shadow .33s ease,  transform .3s ease, letter-spacing .3s ease;
  text-shadow: 0 0 0 #004134, 0 1px 0 #00483B, 0 2px 0 #003528, 0 3px 3px rgba(0, 0, 0, 0.9);
  transform: translate(0px, 15px) perspective(200px) rotateX(10deg);
  letter-spacing: .125em;
}

.retro-btn {
  text-transform: uppercase;
  background: 0 0;
}

Js Code

var buttons = document.querySelectorAll('.btn');

for(var i = 0; i < buttons.length; i++) {
  buttons[i].addEventListener('mousedown', function() {
    this.classList.add('btn-active');
  });
  buttons[i].addEventListener('mouseup', function() {
    this.classList.remove('btn-active');
  });

  buttons[i].addEventListener('mouseleave', function() {
    this.classList.remove('btn-center', 'btn-right', 'btn-left', 'btn-active');
  });

  buttons[i].addEventListener("mousemove", function(e) {
    var leftOffset = this.getBoundingClientRect().left;
    var btnWidth = this.offsetWidth;
    var myPosX = e.pageX;
    var newClass = "";
    if(myPosX < (leftOffset + .3 * btnWidth) ) {
      newClass = 'btn-left'
    } else {
      if(myPosX > (leftOffset + .65 * btnWidth) ) {
        newClass = 'btn-right';
      } else {
        newClass = 'btn-center';
      }
    }
    var clearedClassList = this.className.replace(/btn-center|btn-right|btn-left/gi, "").trim();
    this.className = clearedClassList + " " + newClass;
  });
}

VIEW NOW