Skip to content

Commit 9dfb376

Browse files
jstolpejstolpe
committed
3d css button with html, css, and javascript
1 parent 3197c20 commit 9dfb376

1 file changed

Lines changed: 99 additions & 0 deletions

File tree

‎css_button/index.php‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>3D CSS Button with HTML, CSS, and JavaScript</title>
5+
<meta name="viewport" content="width=device-width,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
6+
<style>
7+
html {
8+
-webkit-tap-highlight-color: transparent;
9+
}
10+
11+
.no-highlight {
12+
-webkit-user-select: none;
13+
-moz-user-select: none;
14+
user-select: none;
15+
}
16+
17+
.the-button-container {
18+
position: absolute;
19+
top: 50%;
20+
left: 50%;
21+
transform: translate( -50%, -50% );
22+
}
23+
24+
.the-button-main {
25+
color: #fff;
26+
font-family: Helvetica, sans-serif;
27+
font-weight: bold;
28+
font-size: 36px;
29+
text-align: center;
30+
background-color: #f70d1a;
31+
position: relative;
32+
padding: 20px 20px;
33+
text-shadow: 0px 3px 0px #000;
34+
box-shadow: inset 0 1px 0 #f70d1a, 0 10px 0 #c90711;
35+
border-radius: 10px;
36+
}
37+
38+
.the-button-base {
39+
height: 100%;
40+
width: 100%;
41+
padding: 5px;
42+
position: absolute;
43+
bottom: -16px;
44+
left: -5px;
45+
z-index: -1;
46+
background-color: #2B1800;
47+
border-radius: 10px;
48+
box-shadow: 0 0 15px #000;
49+
}
50+
51+
/*.the-button-main:active {*/
52+
.the-button-main-active {
53+
text-shadow: 0px 1px 0px #000;
54+
top: 10px;
55+
box-shadow: inset 0 0 5px #FFE5C4;
56+
background-color: #f94c56;
57+
}
58+
59+
.the-button:hover {
60+
cursor: pointer;
61+
}
62+
</style>
63+
<script>
64+
var onButtonDown = function( event ) {
65+
this.children[0].classList.add( 'the-button-main-active');
66+
};
67+
68+
var onButtonUp = function( event ) {
69+
this.children[0].classList.remove( 'the-button-main-active');
70+
};
71+
72+
document.addEventListener( 'DOMContentLoaded', function( event ) {
73+
var buttons = document.getElementsByClassName( 'the-button' );
74+
75+
for ( var i = 0; i < buttons.length; i++ ) {
76+
buttons[i].addEventListener( 'mousedown', onButtonDown );
77+
78+
buttons[i].addEventListener( 'touchstart', onButtonDown );
79+
80+
buttons[i].addEventListener( 'mouseup', onButtonUp );
81+
82+
buttons[i].addEventListener( 'touchend', onButtonUp );
83+
}
84+
} );
85+
</script>
86+
</head>
87+
<body>
88+
<div class="the-button-container no-highlight">
89+
<div class="the-button">
90+
<div class="the-button-main">
91+
PUSH
92+
</div>
93+
</div>
94+
<div class="the-button-base">
95+
96+
</div>
97+
</div>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)