7+ JavaScript 3D Button Examples

This post contains a total of 7+ Hand-Picked JavaScript 3D Button Examples with Source Code. All the 3D Buttons are made using JavaScript & Styled using CSS.

You can use the source code of these examples for educational purpose with credits to the original owner.

Related Posts

Click a Code to Copy it.

1. Robin Delaporte

Made by Robin Delaporte. Cool JavaScript button with hover effect. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
@font-face {
  font-family: "bw";
  src: url("https://robindelaporte.fr/codepen/play/BwModelicaSS01-ExtraBold.woff") format("woff");
}
html {
  font-size: 62.5%;
}

.home {
  position: fixed;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  top: 0%;
  left: 0%;
  background-color: #e9f5ff;
}
.home canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
}
.home span {
  position: relative;
  z-index: 6;
  font-family: "bw";
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 3rem;
  color: #fff;
  pointer-events: none;
}
.home a {
  font-family: "bw";
  text-decoration: none;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1);
  font-size: 3rem;
  color: #fff;
  background-color: #acc7ed;
  border-radius: 10rem;
  padding: 1.5rem 4rem 2rem;
  transform-style: preserve-3d;
  transition: all 0.6s ease;
}
.home a span {
  position: relative;
  opacity: 0;
}
.home a:after {
  content: "";
  background: linear-gradient(56deg, #61dafb 0%, #d6cbf6 46%, #f2056f 100%);
  width: 80%;
  height: 20%;
  position: absolute;
  bottom: -4px;
  left: 10%;
  opacity: 0;
  filter: blur(15px);
  border-radius: 10rem;
  transform: translateZ(-1px);
  transition: opacity 0.6s ease;
}
.home a:before {
  content: "";
  background: linear-gradient(56deg, #61dafb 0%, #d6cbf6 46%, #f2056f 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  border-radius: 10rem;
  transition: opacity 0.4s ease;
}
.home a:hover {
  transition: all 0.6s ease;
  transform: translate(-50%, -50%) scale(1.35);
  transform-origin: center;
}
.home a:hover:after {
  opacity: 1;
  transition: opacity 0.6s ease;
}
.home a:hover:before {
  opacity: 1;
  transition: opacity 0.6s linear;
}
</style>
</head>
<body>
  <div class="home">
  <a href="#">
    <span>play</span>
  </a>
  <span class="ok">play</span>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r79/three.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js'></script>
      <script id="rendered-js" >
class Experience {
  constructor(container, width, height) {
    console.clear();

    this.raycaster = new THREE.Raycaster();
    this.mouse = new THREE.Vector2(0, 0);
    this._pos = {
      x: 0 };


    this.camera = new THREE.PerspectiveCamera(70, width / height, 1, 3000);
    this.camera.position.z = 200;

    this.renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha: true });

    this.renderer.setSize(width, height);
    this.renderer.setClearColor(0xffffff, 0.0);
    this.renderer.setPixelRatio(1.6);
    container.appendChild(this.renderer.domElement);

    const fps = 120;
    this.fpsInterval = 1000 / fps;
    this.then = Date.now();

    this.scene = new THREE.Scene();

    this.resize();
    this.bind();
    this.loop();

    this._addLights();
    this._addMeshes();
  }

  _addLights() {
    var light = new THREE.AmbientLight(0x0);
    this.scene.add(light);

    var spotLight = new THREE.SpotLight(0xf2056f, 0.68, 0);
    spotLight.position.set(150, 150, 0);
    this.scene.add(spotLight);

    var hemlight = new THREE.HemisphereLight(0xd8c7f3, 0x61dafb, 1);
    this.scene.add(hemlight);
  }

  _addMeshes() {
    var _prefix = 'https://robindelaporte.fr/codepen/play/';
    var urls = [
    _prefix + "nx.jpg",
    _prefix + "ny.jpg",
    _prefix + "nz.jpg",
    _prefix + "px.jpg",
    _prefix + "py.jpg",
    _prefix + "pz.jpg"];


    var cubemap = THREE.ImageUtils.loadTextureCube(urls);
    cubemap.format = THREE.RGBFormat;

    var geometry = new THREE.SphereGeometry(24, 32, 32);
    var material = new THREE.MeshPhysicalMaterial({
      color: 0xffffff,
      roughness: 0.3,
      metalness: 0.1,
      transparent: true,
      reflectivity: 0.56,
      envMap: cubemap });


    this._sphere = new THREE.Mesh(geometry, material);
    this._sphere.position.y = -30;
    this._sphere.position.x = -25;
    this.scene.add(this._sphere);

    var geometryTorus = new THREE.TorusBufferGeometry(16, 8, 16, 100);
    this._torus = new THREE.Mesh(geometryTorus, material);
    this._torus.position.y = 30;
    this._torus.position.x = 30;
    this._torus.rotation.x = 2.3;
    this._torus.rotation.y = 0.3;
    this.scene.add(this._torus);

    var geometryCone = new THREE.ConeBufferGeometry(8, 16, 32);
    this._cone = new THREE.Mesh(geometryCone, material);
    this._cone.position.y = 12;
    this._cone.position.x = -50;
    this._cone.position.z = 3;
    this._cone.rotation.x = -0.3;
    this._cone.rotation.z = 0.7;
    this.scene.add(this._cone);

    this._torus.material.opacity = 0;
  }

  animateIn() {
    TweenMax.to(this._torus.material, 0.6, { opacity: 1 });

    TweenMax.fromTo(
    this._torus.scale,
    0.6,
    { x: 0.8, y: 0.8, z: 0.8 },
    { x: 1.35, y: 1.35, z: 1.35 });

    TweenMax.fromTo(
    this._torus.position,
    0.6,
    { x: 10, y: 20 },
    { x: 30, y: 40 });


    TweenMax.fromTo(
    this._torus.rotation,
    0.6,
    { x: 2.0, y: -0.3 },
    { x: 2.3, y: 0.3 });


    TweenMax.fromTo(
    this._sphere.scale,
    0.6,
    { x: 0.8, y: 0.8, z: 0.8 },
    { x: 1.15, y: 1.15, z: 1.15 });

    TweenMax.fromTo(
    this._sphere.position,
    0.6,
    { x: -10, y: -10 },
    { x: -30, y: -40 });


    TweenMax.fromTo(
    this._cone.scale,
    0.6,
    { x: 0.8, y: 0.8, z: 0.8 },
    { x: 1.35, y: 1.35, z: 1.35 });

    TweenMax.fromTo(
    this._cone.position,
    0.6,
    { x: -30, y: 2, z: 3 },
    { x: -70, y: 12, z: 3 });


    TweenMax.fromTo(
    this._cone.rotation,
    0.6,
    { x: -0.2, z: 0.0 },
    { x: -0.3, z: 0.7 });

  }

  animateOut() {
    TweenMax.to(this._torus.material, 0.6, { opacity: 0 });

    TweenMax.to(this._torus.scale, 0.6, { x: 0.8, y: 0.8, z: 0.8 });
    TweenMax.to(this._torus.position, 0.6, { x: 10, y: 20 });
    TweenMax.to(this._torus.rotation, 0.6, { x: 2.0, y: -0.3 });

    TweenMax.to(this._sphere.scale, 0.6, { x: 0.8, y: 0.8, z: 0.8 });
    TweenMax.to(this._sphere.position, 0.6, { x: -10, y: -10 });

    TweenMax.to(this._cone.scale, 0.6, { x: 0.8, y: 0.8, z: 0.8 });
    TweenMax.to(this._cone.position, 0.6, { x: -30, y: 2, z: 3 });
    TweenMax.to(this._cone.rotation, 0.6, { x: -0.2, z: 0.0 });
  }

  bind() {
    window.addEventListener('resize', this.resize.bind(this), false);
    document.body.addEventListener("mousemove", this.onMouseMove.bind(this), false);

    document.querySelector("a").addEventListener("mouseenter", () => {
      TweenMax.to(".ok", 0.6, { scale: 1.35 });
      this.animateIn();
    });

    document.querySelector("a").addEventListener("mouseleave", () => {
      TweenMax.to(".ok", 0.6, { scale: 1.0 });
      this.animateOut();
    });

  }

  onMouseMove(event) {
    this.mouse.x = event.clientX / window.innerWidth * 2 - 1;
    this.mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
  }

  loop() {
    this.raf = window.requestAnimationFrame(this.loop.bind(this));

    const now = Date.now();
    const delta = now - this.then;

    if (delta > this.fpsInterval) {
      // this.scene.update()
      this.camera.position.x += this.mouse.x * (window.innerWidth * 0.02) - this.camera.position.x * 0.03;
      this.camera.position.y +=
      -(this.mouse.y * (window.innerHeight * 0.02)) - this.camera.position.y * 0.03;
      this.camera.lookAt(this.scene.position);

      this.renderer.render(this.scene, this.camera);
      this.then = now;
    }
  }

  resize() {
    //     this.innerWidth = window.innerWidth
    //     this.innerHeight = window.innerHeight

    //     this.camera.aspect = this.innerWidth / this.innerHeight
    //     this.camera.updateProjectionMatrix()

    //     this.renderer.setSize( this.innerWidth, this.innerHeight )
  }}


const container = document.querySelector('.home');
let experience = new Experience(container, 400, 300);
    </script>
</body>
</html>

2. By Andreas Pihl Jrgensen

Made by Andreas Pihl Jrgensen. Simple Js button. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
body{
  background-color:#ededed;
  margin:0;
}
button{
  background-color:#427A82;
  position:relative;
  width:100px;
  height:60px;
  -webkit-transition:top 0.3s ease;
  transition:all 0.3s ease;
  border-radius:50%;
  border:none;
  left:calc(50% - 50px);
  top:calc(50vh - 30px);
  box-shadow:inset -2px -2px 0 1px rgba(105,150,156,1);
}
button:before{
  z-index:-9;
  content: "";
  position:fixed;
  width:100px;
  height:60px;
  background: rgba(1,46,52,1);
background: -moz-linear-gradient(to right, rgba(1,46,52,1) 0%, rgba(1,46,52,1) 58%, rgba(105,150,156,1) 58%, rgba(105,150,156,1) 66%, rgba(1,46,52,1) 66%, rgba(1,46,52,1) 72%, rgba(105,150,156,1) 72%, rgba(105,150,156,1) 100%);
background: -webkit-gradient(left top, right top, color-stop(0%, rgba(1,46,52,1)), color-stop(58%, rgba(1,46,52,1)), color-stop(58%, rgba(105,150,156,1)), color-stop(66%, rgba(105,150,156,1)), color-stop(66%, rgba(1,46,52,1)), color-stop(72%, rgba(1,46,52,1)), color-stop(72%, rgba(105,150,156,1)), color-stop(100%, rgba(105,150,156,1)));
background: -webkit-linear-gradient(to right, rgba(1,46,52,1) 0%, rgba(1,46,52,1) 58%, rgba(105,150,156,1) 58%, rgba(105,150,156,1) 66%, rgba(1,46,52,1) 66%, rgba(1,46,52,1) 72%, rgba(105,150,156,1) 72%, rgba(105,150,156,1) 100%);
background: -o-linear-gradient(to right, rgba(1,46,52,1) 0%, rgba(1,46,52,1) 58%, rgba(105,150,156,1) 58%, rgba(105,150,156,1) 66%, rgba(1,46,52,1) 66%, rgba(1,46,52,1) 72%, rgba(105,150,156,1) 72%, rgba(105,150,156,1) 100%);
background: -ms-linear-gradient(to right, rgba(1,46,52,1) 0%, rgba(1,46,52,1) 58%, rgba(105,150,156,1) 58%, rgba(105,150,156,1) 66%, rgba(1,46,52,1) 66%, rgba(1,46,52,1) 72%, rgba(105,150,156,1) 72%, rgba(105,150,156,1) 100%);
background: linear-gradient(to right, rgba(1,46,52,1) 0%, rgba(1,46,52,1) 58%, rgba(105,150,156,1) 58%, rgba(105,150,156,1) 66%, rgba(1,46,52,1) 66%, rgba(1,46,52,1) 72%, rgba(105,150,156,1) 72%, rgba(105,150,156,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#012e34', endColorstr='#69969c', GradientType=1 );
  border-radius:50%;
  border:none;
  left:calc(50% - 50px);
  top:calc(50vh - 20px);
  -webkit-transition:all 0.3s ease;
  transition:all 0.3s ease;
  box-shadow:1px 4px 10px rgba(0,0,0,0.3);
}
button:active{
  top:calc(50vh - 30px + 10px);
}
button:focus{
  outline:none; 
}
</style>
</head>
<body>
  <button></button>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script>
$('body *').on('touchstart', function () {});
    </script>
</body>
</html>

3. By Brett Sauers

Made by Brett Sauers. JavaScript 3D Button with cool color fill animation. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
  
<style>
html{
  overflow:hidden;
}
body{
  background:#eee;
}
.hold{
	width: 120px;
  margin: auto;
position: absolute;
top: 50%;
  margin-top:-60px;
left: 0;
bottom: 0;
right: 0;
  
}
.button {
background-color:#eee;
width:120px;
height:120px;
transition:all 0.2s;
-webkit-transition:all 0.2s; /* Safari */
float:left;
border:0;
position:relative;
text-align: center;
line-height: 120px;
  border-radius:70px;
  outline:none;
  margin:0 auto;
  overflow:hidden;
}
/*.button:hover{
	z-index:2;
	margin-top:-8px;
	background-color:#ffffff;
	box-shadow:		0 1px 0 hsl(0,0%,75%),
					0 2px 0 hsl(0,0%,74%),
					0 3px 0 hsl(0,0%,73%),
					0 4px 0 hsl(0,0%,72%),
					0 5px 0 hsl(0,0%,71%),
					0 6px 0 hsl(0,0%,70%),
					0 7px 0 hsl(0,0%,69%),
					0 8px 0 hsl(0,0%,68%),
					/* LIGHT SHADOWS */
					0 0 5px rgba(255,255,255,.05),
					0 -1px 3px rgba(255,255,255,.2),
					0 -3px 5px rgba(255,255,255,.2),
					0 -5px 10px rgba(255,255,255,.2),
					0 -10px 10px rgba(255,255,255,.2),
					0 -20px 20px rgba(255,255,255,.3),
					/* DARK SHADOWS */
					0 0 5px rgba(0,0,0,.05),
					0 1px 3px rgba(0,0,0,.2),
					0 3px 5px rgba(0,0,0,.2),
					0 5px 10px rgba(0,0,0,.2),
					0 10px 10px rgba(0,0,0,.2),
					0 20px 20px rgba(0,0,0,.3);
}
.button:active{
	margin-top:0px;
	background-color:#eeeeee;
	transition:all 0.1s;
	-webkit-transition:all 0.1s; /* Safari */
	box-shadow:		0 0px 0 hsl(76,64%,30%),
					0 0px 0 hsl(76,64%,28%),
					0 0px 0 hsl(76,64%,32%),
					0 0px 0 hsl(76,64%,30%),
					0 0px 0 hsl(76,64%,28%),
					0 0px 0 hsl(76,64%,25%),
					0 0px 0 hsl(76,64%,22%),
					0 0px 0 hsl(76,64%,20%),
					0 0 0px rgba(0,0,0,.05),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.2),
					0 0px 0px rgba(0,0,0,.3);
}*/


.inside{
  width: 120px;
  height: 120px;
  
  position:relative;

  float:left;
}
.in2{
	font-family: 'Lato', sans-serif;
  font-weight:700;
  color:#fff;
  line-height:120px;
  font-size:50px;
  background-color: #2ecc71;
}
.in2:hover{
  width: 100%;
  height: 100%;
}
svg{
	width: 100%;
  height: 100%;
  display:block;

  
}
.btn_top{
	height: 240px;
  width: 120px;
    transition:all 0.3s;
	-webkit-transition:all 0.3s; /* Safari */
}
.btn_top:hover{
  
  margin-top:-120px;
}
.circle{
  width: 110px;
  height: 110px;
  background-color:#2ecc71;
  border-radius:80px;
  position:absolute;
  top:5px;
  left:5px;
  z-index:-1;
    transition:all 0.5s;
	-webkit-transition:all 0.5s; /* Safari */
}
.circle.expand{
  width: 3000px;
  height: 3000px;
  z-index: 2;
  border-radius:3000px;
  top:-1440px;
  left:-1440px;
    background-color:#eee;
}

#content{
  width: 1200px;
  height: 800px;
  background-color:#fff;
  margin:0 auto;
  position:relative;
  z-index:999;
  top:-900px;
  opacity:0;
        transition:all 0.7s;
	-webkit-transition:all 0.7s; /* Safari */
}
#content.expand{
  top:10px;
  opacity:1;
}
</style>
</head>
<body>
  <div id="content" class="">
  <h1>CAN HAZ CONTENT</h1>
</div>

<div class="hold">  
  <div class="button">
    <div class="btn_top">
    <div class="inside">
    	<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="800px"
   height="800px" viewBox="0 0 800 800" enable-background="new 0 0 800 800" xml:space="preserve">
<g id="back">
  <polygon opacity="0.4" points="390.366,412.265 329.664,320.193 45.787,164.399 131.318,393.906 313.927,481.664 276.466,538.916 
    390.781,623.396 505.076,538.916 467.633,481.664 650.225,393.906 735.773,164.399 451.862,320.193   "/>
</g>
<g id="middle">
  <polygon opacity="0.5" points="390.408,410.428 335.776,327.563 80.286,187.349 157.265,393.905 321.612,472.887 287.898,524.414 
    390.781,600.445 493.646,524.414 459.947,472.887 624.28,393.905 701.273,187.349 445.754,327.563  "/>
</g>
<g id="front">
  <polygon points="390.449,408.592 341.887,334.934 114.785,210.299 183.211,393.904 329.297,464.111 299.329,509.912 
    390.781,577.496 482.217,509.912 452.262,464.111 598.336,393.904 666.775,210.299 439.646,334.934   "/>
</g>
</svg>
    </div>
  	<div class="inside in2">
  		GO!
  	</div>
    </div>
  </div>
  <div class="circle"></div>
  </div>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
$('document').ready(function () {

  $('.in2').click(function () {
    console.log($(window).width());
    $('.circle').addClass('expand');
    $('#content').addClass('expand');
    location.replace("http://stackoverflow.com");
  });
});
    </script>
</body>
</html>

4. By chenchen

Made by chenchen. 3d buttons with box-shadow effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link href="https://fonts.googleapis.com/css?family=Raleway:800,800i,900,900i" rel="stylesheet">
  
<style>
html, body {
  margin: 0;
  padding: 0;
  background: #F0F0F0;
  position: relative;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

ul {
  list-style: none;
}
ul li:last-child {
  margin-left: 50px;
}

#container {
  max-width: 800px;
  overflow: hidden;
  transform: rotate(-20deg);
}
#container .btn {
  margin: 25px 30px;
  transform: skew(13deg, -3deg);
  position: relative;
  display: inline-block;
  transition: 0.3s;
  cursor: pointer;
  box-shadow: -20px 25px 20px rgba(0, 0, 0, 0.4);
}
#container .btn .face {
  display: block;
  width: 195px;
  height: 125px;
  padding: 10px 15px;
  color: #fff;
  font-weight: 800;
  font-family: "Raleway", sans-serif;
  letter-spacing: 2px;
  transition: 0.3s;
}
#container .btn .left-side {
  display: block;
  width: 15px;
  height: 145px;
  position: absolute;
  transform: skew(0deg, -52deg);
  top: 9px;
  left: -14px;
  transition: 0.3s;
}
#container .btn .bottom-side {
  display: block;
  width: 225px;
  height: 18px;
  position: absolute;
  transform: skew(-39deg, 0deg);
  bottom: -18px;
  left: -7px;
  transition: 0.3s;
}
#container #btn-black .face {
  background: #302F37;
}
#container #btn-black .left-side {
  background: #171717;
}
#container #btn-black .bottom-side {
  background: #0B0B0B;
}
#container #btn-red .face {
  background: #CD0414;
}
#container #btn-red .left-side {
  background: #752024;
}
#container #btn-red .bottom-side {
  background: #370208;
}
#container #btn-grey .face {
  background: #D8D9D1;
}
#container #btn-grey .left-side {
  background: #8E8982;
}
#container #btn-grey .bottom-side {
  background: #42413F;
}
#container #btn-blue .face {
  background: #0213C1;
}
#container #btn-blue .left-side {
  background: #181E42;
}
#container #btn-blue .bottom-side {
  background: #090B1A;
}

img {
  max-width: 60%;
  position: absolute;
  top: 0;
  left: 0;
}
</style>
</head>
<body>
  <div id="container">
  <ul>
    <li>
      <div class="btn" id="btn-black">
        <span class="left-side"></span>
        <span class="face">ENTER</span>
        <span class="bottom-side"></span>
      </div>
      <div class="btn" id="btn-red">
        <span class="left-side"></span>
        <span class="face">ENTER</span>
        <span class="bottom-side"></span>
      </div>
    </li>
    <li>
      <div class="btn" id="btn-grey">
        <span class="left-side"></span>
        <span class="face">ENTER</span>
        <span class="bottom-side"></span>
      </div>
      <div class="btn" id="btn-blue">
        <span class="left-side"></span>
        <span class="face">ENTER</span>
        <span class="bottom-side"></span>
      </div>
    </li>
  </ul>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
      <script>
$(".btn").click(function () {
  $(this).css('box-shadow', '-15px 20px 15px rgba(0,0,0,0.6)');
  $(this).children(".bottom-side").css({
    left: "-9px",
    height: "12px"
    // 'bottom' : '-15px'
  });
  $(this).children(".face").css({
    transform: "translate(-5px,7px)" });

  $(this).children(".left-side").css({
    width: "10px",
    top: "13px" });

  setTimeout(function () {
    getBack();
  }, 200);
});

function getBack() {
  $(".btn").css('box-shadow', '-20px 25px 20px rgba(0,0,0,0.4)');
  $(".bottom-side").css({
    left: "-7px",
    height: "18px",
    bottom: "-18px" });

  $(".face").css({
    transform: "translate(0)" });

  $(".left-side").css({
    width: "15px",
    top: "9px" });

}
    </script>
</body>
</html>

5. By Hamienos Rocha

Made by Hamienos Rocha. JavaScript 3D Button with Shadow effects. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:[email protected]&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --background-page: #22ddce;
  --pink: #ee5867;
  --pink-light: #fff0f0;
  --pink-dark: #ec3a50;
  font-size: 10px;
}

html {
  height: 100vh;
}

body {
  background: var(--background-page);
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100%;
}

button {
  font: 500 4rem 'Rubik', sans-serif;
  cursor: pointer;
  outline: none;
}

.btn_south-face {
  background: var(--pink);
  position: relative;
  width: 30rem;
  height: 8rem;
  border: none;
  border-radius: 1rem;
  transition: 0.2s;
}

.btn-3d {
  background: var(--pink-light);
  color: #382b22;
  position: absolute;
  bottom: 2rem;
  left: 0;
  width: 100%;
  height: 100%;
  border: inherit;
  border-radius: inherit;
  transition: background 0.2s cubic-bezier(0, 0, 0.58, 1),
    bottom 0.2s cubic-bezier(0, 0, 0.58, 1);
}

.btn-3d:hover {
  background: #ffe5e5;
  bottom: 1rem;
}

.btn-3d:active {
  background: #ffe5e5;
  bottom: 0;
}

.btn-text {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  border-radius: 1rem;
  overflow: hidden;
}
</style>
</head>
<body>
<span class="btn_south-face">
  <button class="btn-3d">
    <p class='btn-text'>I'm a Button</p>
  </button>
</span>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>
      <script>
const southFace = document.querySelector('.btn_south-face');
const buttonText = document.querySelector('.btn-text');
const button = document.querySelector('.btn-3d');

const blueShadow = '#1bafa3';
const pinkShadow = '#EC97A8';

southFace.style.boxShadow = makeShadow(100, blueShadow);
buttonText.style.textShadow = makeShadow(70, pinkShadow);

button.addEventListener('mouseover', () => {
  southFace.style.boxShadow = makeShadow(60, blueShadow);

  button.addEventListener('mouseout', () => {
    southFace.style.boxShadow = makeShadow(100, blueShadow);
  });
});

button.addEventListener('mousedown', () => {
  southFace.style.boxShadow = makeShadow(0, blueShadow);

  button.addEventListener('mouseup', () => {
    southFace.style.boxShadow = makeShadow(60, blueShadow);
  });
});

function makeShadow(shadowLength, color) {
  let textShadow = '';

  for (let i = 1; i < shadowLength; i++) {if (window.CP.shouldStopExecution(0)) break;
    textShadow += `${-i * 1.1}px ${i}px ${i * 0.1}px ${color}`;
    if (i != shadowLength - 1) {
      textShadow += ', ';
    }
  }window.CP.exitedLoop(0);

  return textShadow;
}
    </script>
</body>
</html>

6. By PixelTeam

Made by PixelTeam. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
  font-family: sans-serif;
}

.button {
  /* Rozmiar i pozycja */
  display: block;
  width: 124px;
  height: 44px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -22px;
  margin-left: -62px;
  
  /* Tekst */
  font-size: 22px;
  line-height: 44px;
  text-align: center;
  text-decoration: none;
  color: white;
  text-shadow: 0 -1px -1px #0f864a;
  
  /* Wyglฤ…d */
  background-color: #12a65c;
  border-radius: 4px;
  box-shadow: 0 4px 0 #0f864a, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
  
  /* Przejล›cie */
  -webkit-transition: all 0.15s ease-in-out;
  -moz-transition: all 0.15s ease-in-out;
  -o-transition: all 0.15s ease-in-out;
  -ms-transition: all 0.15s ease-in-out;
  transition: all 0.15s ease-in-out;
}

.button:hover {
  text-shadow: 0 -1px -1px #119d57;
  background-color: #14bd69;
  box-shadow: 0 4px 0 #119d57, 0 5px 5px 1px rgba(0, 0, 0, 0.4);
}
  
.button:active {
	margin-top: -18px;
	box-shadow: none;
}
</style>
</head>
<body>
  <a href="#" class="button">PUSH</a>
    <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script>

  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script id="rendered-js" >
// FireFox CodePen.io Fix
$('a').click(function (e) {
  e.preventDefault();
});
    </script>
</body>
</html>

7. By Didzis Gruznovs

Made by Didzis Gruznovs. 3D Button Element. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Open+Sans:300'>
  
<style>
body {
  background-color: #242424;
}

.perspective {
  position: relative;
  margin: 150px auto;
  perspective: 500px;
  -webkit-perspective: 500px;
  /* Chrome, Safari, Opera */
  width: 140px;
  height: 100px;
}
.perspective:hover .button, .perspective.active .button {
  -webkit-transform: rotateY(10deg);
  -moz-transform: rotateY(10deg);
  -o-transform: rotateY(10deg);
  -ms-transform: rotateY(10deg);
  transform: rotateX(10deg);
  top: -100px;
  box-shadow: 0 3px #264BAC, 0 160px 89px rgba(66, 112, 234, 0.1);
}

.button {
  position: absolute;
  top: 0;
  height: 140px;
  width: 140px;
  cursor: pointer;
  border-radius: 30px;
  text-align: center;
  color: #fff;
  background: #4270EA;
  box-shadow: 0 8px #264BAC, 0 60px 25px rgba(66, 112, 234, 0.19);
  -webkit-transform: rotateY(40deg);
  -moz-transform: rotateY(40deg);
  -o-transform: rotateY(40deg);
  -ms-transform: rotateY(40deg);
  transform: rotateX(40deg);
  -webkit-transition: all 1s;
  -moz-transition: all 1s;
  -o-transition: all 1s;
  transition: all 1s;
}

.button__icon {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.group {
  display: inline-block;
}

.icon {
  width: 100px;
  height: 100px;
  position: relative;
}

.circle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #FFFFFF;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  -webkit-transition: all 1s ease;
  transition: all 1s ease;
}

.icon-principles {
  -moz-transition: all 0.7s ease-out;
  -o-transition: all 0.7s ease-out;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.icon-principles .circle-purple1 {
  left: 30px;
  top: 28px;
}
.icon-principles .circle-gray1 {
  left: 50px;
  top: 28px;
}
.icon-principles .circle-purple2 {
  left: 70px;
  top: 28px;
}
.icon-principles .circle-gray2 {
  left: 30px;
  top: 48px;
}
.icon-principles .circle-purple3 {
  left: 50px;
  top: 48px;
}
.icon-principles .circle-gray3 {
  left: 70px;
  top: 48px;
}
.icon-principles .circle-purple4 {
  left: 30px;
  top: 68px;
}
.icon-principles .circle-gray4 {
  left: 50px;
  top: 68px;
}
.icon-principles .circle-purple5 {
  left: 70px;
  top: 68px;
}

.perspective:hover .icon-principles,
.perspective.active .icon-principles {
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.perspective:hover .icon-principles .circle-purple1,
.perspective.active .icon-principles .circle-purple1 {
  -moz-transform: translate(20px, 20px);
  -ms-transform: translate(20px, 20px);
  -webkit-transform: translate(20px, 20px);
  transform: translate(20px, 20px);
}
.perspective:hover .icon-principles .circle-gray1,
.perspective.active .icon-principles .circle-gray1 {
  -moz-transform: translate(20px, 20px);
  -ms-transform: translate(20px, 20px);
  -webkit-transform: translate(20px, 20px);
  transform: translate(20px, 20px);
}
.perspective:hover .icon-principles .circle-purple2,
.perspective.active .icon-principles .circle-purple2 {
  -moz-transform: translateY(40px);
  -ms-transform: translateY(40px);
  -webkit-transform: translateY(40px);
  transform: translateY(40px);
}
.perspective:hover .icon-principles .circle-gray2,
.perspective.active .icon-principles .circle-gray2 {
  -moz-transform: translate(20px, -20px);
  -ms-transform: translate(20px, -20px);
  -webkit-transform: translate(20px, -20px);
  transform: translate(20px, -20px);
}
.perspective:hover .icon-principles .circle-purple3,
.perspective.active .icon-principles .circle-purple3 {
  -moz-transform: translate(20px, -20px);
  -ms-transform: translate(20px, -20px);
  -webkit-transform: translate(20px, -20px);
  transform: translate(20px, -20px);
}
.perspective:hover .icon-principles .circle-gray3,
.perspective.active .icon-principles .circle-gray3 {
  -moz-transform: translate(-20px, 20px);
  -ms-transform: translate(-20px, 20px);
  -webkit-transform: translate(-20px, 20px);
  transform: translate(-20px, 20px);
}
.perspective:hover .icon-principles .circle-purple4,
.perspective.active .icon-principles .circle-purple4 {
  -moz-transform: translateY(-40px);
  -ms-transform: translateY(-40px);
  -webkit-transform: translateY(-40px);
  transform: translateY(-40px);
}
.perspective:hover .icon-principles .circle-gray4,
.perspective.active .icon-principles .circle-gray4 {
  -moz-transform: translate(-20px, -20px);
  -ms-transform: translate(-20px, -20px);
  -webkit-transform: translate(-20px, -20px);
  transform: translate(-20px, -20px);
}
.perspective:hover .icon-principles .circle-purple5,
.perspective.active .icon-principles .circle-purple5 {
  -moz-transform: translateX(-40px);
  -ms-transform: translateX(-40px);
  -webkit-transform: translateX(-40px);
  transform: translateX(-40px);
}

.details {
  list-style: none;
  padding: 0;
  padding-top: 50px;
  margin-left: 20px;
  font-family: "Open Sans";
  font-weight: 300;
  font-size: 14px;
}

.details__item {
  display: inline-block;
  margin: 0 10px;
}
.details__item a {
  color: #ffffff;
  text-decoration: none;
}
.details__item a:hover {
  color: #bd953e;
}
</style>
</head>
<body>
  <div class="perspective">
  <div class="button">
    <div class="button__icon">
      <div class="group group-principles">
        <div class="icon icon-principles">
          <div class="circle circle-purple1"></div>
          <div class="circle circle-purple2"></div>
          <div class="circle circle-purple3"></div>
          <div class="circle circle-purple4"></div>
          <div class="circle circle-purple5"></div>
          <div class="circle circle-gray1"></div>
          <div class="circle circle-gray2"></div>
          <div class="circle circle-gray3"></div>
          <div class="circle circle-gray4"></div>
        </div>
      </div>
    </div>
  </div>
</div>
<ul class="details">
  <li class="details__item"><a href="https://dribbble.com/bduuzis" target="_blank">Dribbble</a></li>
  <li class="details__item"><a href="https://lv.linkedin.com/in/didzisgruznovs" target="_blank">Linked In</a></li>
</ul>
  <script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
      <script>
// Delete this to stop animation
setInterval(function () {
  $(".perspective").toggleClass("active");
}, 3000);
    </script>
</body>
</html>

8. By Christos Hrousis

Made by Christos Hrousis. 3d Button with +/- transform. Source

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

<style>
body {
  align-items: center;
  background-color: skyblue;
  display: flex;
  height: 100vh;
  justify-content: center;
  width: 100vw;
}

.btn_3d {
  display: block;
  margin: 0 auto;
  perspective: 300px;
  width: 75px;
}
.btn_3d * {
  box-sizing: border-box;
}
.btn_3d > span {
  background: white;
  border: none;
  box-shadow: 1px 73px 41px -22px rgba(0, 0, 0, 0.75);
  cursor: pointer;
  display: block;
  transform-style: preserve-3d;
  transition: all 250ms ease-in;
  transform: rotateX(40deg);
  outline: 1px solid transparent;
  padding: 18px;
  position: relative;
  width: 100%;
}
.btn_3d > span:after {
  background: #CCCCCC;
  content: "";
  height: 40%;
  left: 0;
  position: absolute;
  top: 100%;
  transform-origin: 0% 0%;
  transform: rotateX(-90deg);
  transition: all 250ms ease-in;
  width: 100%;
  z-index: -1;
}
.btn_3d > span > span {
  display: block;
  height: 40px;
  position: relative;
  transform: scale(0.9);
  width: 40px;
}
.btn_3d > span > span:before, .btn_3d > span > span:after {
  content: "";
  border-radius: 2px;
  display: block;
  width: 85%;
  height: 25%;
  position: absolute;
  top: 37%;
  left: 8%;
  transition: 0.3s;
  background: black;
}
.btn_3d > span > span:after {
  transform: rotate(90deg);
}
.btn_3d > span:hover, .btn_3d > span:focus {
  background: #F6F6F6;
  box-shadow: 1px 73px 41px -22px black;
  color: #ED8728;
  transform: rotateX(30deg);
}
.btn_3d > span:hover:after, .btn_3d > span:focus:after {
  background: #BEBEBE;
}
.btn_3d > span:hover > span:before, .btn_3d > span:hover > span:after, .btn_3d > span:focus > span:before, .btn_3d > span:focus > span:after {
  width: 62%;
}
.btn_3d > span:hover > span:before, .btn_3d > span:focus > span:before {
  transform: rotate(180deg) translate(0, 0);
}
.btn_3d > span:hover > span:after, .btn_3d > span:focus > span:after {
  transform: rotate(-180deg) translate(-37.5%, 0);
}
.btn_3d > span:active {
  transform: rotateX(20deg);
}
.btn_3d > span:active > span:before,
.btn_3d > span:active > span:after {
  background: skyblue;
}
.btn_3d.active > span > span:before, .btn_3d.active > span > span:after {
  width: 62%;
}
.btn_3d.active > span > span:before {
  transform: rotate(180deg) translate(0, 0);
}
.btn_3d.active > span > span:after {
  transform: rotate(-180deg) translate(-37.5%, 0);
}
</style>
</head>
<body>
  <span class='btn_3d'>
  <span>
    <span>
    </span>
  </span>
</span>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
      <script>
$(document).ready(function () {
  $('.btn_3d').click(function () {
    $(this).toggleClass('active');
  });
});
    </script>
</body>
</html>