Onclick CSS button effect

Question

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    lt div class  one  gt       lt p gt  lt a id  button  href   gt Button lt  a gt  lt  p gt   lt  div gt    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

User · Answer

JS provides the tools to do this the right way. Try the demo snippet.

_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';

_x000D_

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_

_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>

_x000D_

User · Answer

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

User · Answer

You should apply the following styles    button active       vertical-align  top      padding  8px 13px 6px      This will give you the necessary effect  demo here

User · Answer

This is a press down button example I ve made    lt div gt       lt form id  forminput  action  action  method  POST  gt                  lt  form gt       lt div style  right  0px bottom  0px position  fixed   class  thumbnail  gt           lt div class  image  gt               lt a onclick  document getElementById  forminput   submit     gt                   lt img src  images button png  alt  Some awesome text  gt               lt  a gt           lt  div gt       lt  div gt   lt  div gt    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

[html] Onclick CSS button effect

Examples related to html

Examples related to css

Examples related to button

Examples related to onclick