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>