I'm creating a CSS button and I'm trying to make an onclick effect: when the user clicks on the button it would push down the button text by 1px. My problem here is that it's pushing the whole bottom of the button. How would you proceed?
<div class="one">
<p><a id="button" href=#>Button</a></p>
</div>
Here's the CSS:
#button {
display: block;
width:150px;
margin:10px auto;
padding:7px 13px;
text-align:center;
background:#a2bb33;
font-size:20px;
font-family: 'Arial', sans-serif;
color:#ffffff;
white-space: nowrap;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
#button:active {
vertical-align: top;
padding-top: 8px;
}
.one a {
text-decoration: none;
}
The answer is
You should apply the following styles:
#button:active {
vertical-align: top;
padding: 8px 13px 6px;
}
This will give you the necessary effect, demo here.
Push down the whole button. I suggest this it is looking nice in button.
#button:active {
position: relative;
top: 1px;
}
if you only want to push text increase top-padding and decrease bottom padding. You can also use line-height.
JS provides the tools to do this the right way. Try the demo snippet.
_x000D_
_x000D_
_x000D_
_x000D_
var doc = document;_x000D_
var buttons = doc.getElementsByTagName('button');_x000D_
var button = buttons[0];_x000D_
_x000D_
button.addEventListener("mouseover", function(){_x000D_
this.classList.add('mouse-over');_x000D_
});_x000D_
_x000D_
button.addEventListener("mouseout", function(){_x000D_
this.classList.remove('mouse-over');_x000D_
});_x000D_
_x000D_
button.addEventListener("mousedown", function(){_x000D_
this.classList.add('mouse-down');_x000D_
});_x000D_
_x000D_
button.addEventListener("mouseup", function(){_x000D_
this.classList.remove('mouse-down');_x000D_
alert('Button Clicked!');_x000D_
});_x000D_
_x000D_
//this is unrelated to button styling. It centers the button._x000D_
var box = doc.getElementById('box');_x000D_
var boxHeight = window.innerHeight;_x000D_
box.style.height = boxHeight + 'px'; button{_x000D_
text-transform: uppercase;_x000D_
background-color:rgba(66, 66, 66,0.3);_x000D_
border:none;_x000D_
font-size:4em;_x000D_
color:white;_x000D_
-webkit-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);_x000D_
-moz-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);_x000D_
box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);_x000D_
}_x000D_
button:focus {_x000D_
outline:0;_x000D_
}_x000D_
.mouse-over{_x000D_
background-color:rgba(66, 66, 66,0.34);_x000D_
}_x000D_
.mouse-down{_x000D_
-webkit-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);_x000D_
-moz-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);_x000D_
box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52); _x000D_
}_x000D_
_x000D_
/* unrelated to button styling */_x000D_
#box {_x000D_
display: flex;_x000D_
flex-flow: row nowrap ;_x000D_
justify-content: center;_x000D_
align-content: center;_x000D_
align-items: center;_x000D_
width:100%;_x000D_
}_x000D_
_x000D_
button {_x000D_
order:1;_x000D_
flex: 0 1 auto;_x000D_
align-self: auto;_x000D_
min-width: 0;_x000D_
min-height: auto;_x000D_
} _x000D_
_x000D_
_x000D_
<!DOCTYPE html>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<meta charset=utf-8 />_x000D_
<meta name="description" content="3d Button Configuration" />_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
<section id="box">_x000D_
<button>_x000D_
Submit_x000D_
</button>_x000D_
</section>_x000D_
</body>_x000D_
</html>This is a press down button example I've made:
<div>
<form id="forminput" action="action" method="POST">
...
</form>
<div style="right: 0px;bottom: 0px;position: fixed;" class="thumbnail">
<div class="image">
<a onclick="document.getElementById('forminput').submit();">
<img src="images/button.png" alt="Some awesome text">
</a>
</div>
</div>
</div>
the CSS file:
.thumbnail {
width: 128px;
height: 128px;
}
.image {
width: 100%;
height: 100%;
}
.image img {
-webkit-transition: all .25s ease; /* Safari and Chrome */
-moz-transition: all .25s ease; /* Firefox */
-ms-transition: all .25s ease; /* IE 9 */
-o-transition: all .25s ease; /* Opera */
transition: all .25s ease;
max-width: 100%;
max-height: 100%;
}
.image:hover img {
-webkit-transform:scale(1.05); /* Safari and Chrome */
-moz-transform:scale(1.05); /* Firefox */
-ms-transform:scale(1.05); /* IE 9 */
-o-transform:scale(1.05); /* Opera */
transform:scale(1.05);
}
.image:active img {
-webkit-transform:scale(.95); /* Safari and Chrome */
-moz-transform:scale(.95); /* Firefox */
-ms-transform:scale(.95); /* IE 9 */
-o-transform:scale(.95); /* Opera */
transform:scale(.95);
}
Enjoy it!
Source: Stackoverflow.com