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

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

JS provides the tools to do this the right way   Try the demo snippet      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    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   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D     lt head gt  x000D       lt meta charset utf-8   gt  x000D       lt meta name  description  content  3d Button Configuration    gt  x000D     lt  head gt  x000D   x000D     lt body gt  x000D       lt section id  box  gt  x000D         lt button gt  x000D          Submit x000D         lt  button gt  x000D       lt  section gt  x000D     lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

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