Onclick CSS button effect [duplicate]

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?

<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;
}

Actual click functions require javascript/jquery for permanent effects. — Paulie_D
– Paulie_D, Commented Jan 23, 2014 at 15:18

GʀᴜᴍᴘʏCᴀᴛ · Accepted Answer · 2016-07-18 03:56:36Z

23

You should apply the following styles:

#button:active {
    vertical-align: top;
    padding: 8px 13px 6px;
}

This will give you the necessary effect, demo here.

edited Jul 18, 2016 at 3:56

GʀᴜᴍᴘʏCᴀᴛ

9,08620 gold badges91 silver badges165 bronze badges

answered Jan 23, 2014 at 15:16

evanzto

9,3813 gold badges29 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

seven-phases-max · Accepted Answer · 2015-07-06 16:41:45Z

10

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.

edited Jul 6, 2015 at 16:41

seven-phases-max

11.9k1 gold badge47 silver badges58 bronze badges

answered Jan 23, 2014 at 15:39

Zuhair

953 bronze badges

Comments

GʀᴜᴍᴘʏCᴀᴛ · Accepted Answer · 2016-07-18 03:47:43Z

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!

This would be awesome, except for whatever reason in my particular setup, in Chrome, it suddenly antialiases the (8pt) text during transition and removes the antialias when done, which looks a bit strange. Really creative use of CSS otherwise!

Ronnie Smith · Accepted Answer · 2016-07-18 05:05:28Z

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

var doc = document;
var buttons = doc.getElementsByTagName('button');
var button = buttons[0];

button.addEventListener("mouseover", function(){
  this.classList.add('mouse-over');
});

button.addEventListener("mouseout", function(){
  this.classList.remove('mouse-over');
});

button.addEventListener("mousedown", function(){
  this.classList.add('mouse-down');
});

button.addEventListener("mouseup", function(){
  this.classList.remove('mouse-down');
  alert('Button Clicked!');
});

//this is unrelated to button styling.  It centers the button.
var box = doc.getElementById('box');
var boxHeight = window.innerHeight;
box.style.height = boxHeight + 'px';

button{
  text-transform: uppercase;
  background-color:rgba(66, 66, 66,0.3);
  border:none;
  font-size:4em;
  color:white;
  -webkit-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);
  -moz-box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);
  box-shadow: 0px 10px 5px -4px rgba(0,0,0,0.33);
}
button:focus {
  outline:0;
}
.mouse-over{
  background-color:rgba(66, 66, 66,0.34);
}
.mouse-down{
  -webkit-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);
  -moz-box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);
  box-shadow: 0px 6px 5px -4px rgba(0,0,0,0.52);                 
}

/* unrelated to button styling */
#box {
  display: flex;
  flex-flow: row nowrap ;
  justify-content: center;
  align-content: center;
  align-items: center;
  width:100%;
}

button {
  order:1;
  flex: 0 1 auto;
  align-self: auto;
  min-width: 0;
  min-height: auto;
}

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset=utf-8 />
    <meta name="description" content="3d Button Configuration" />
  </head>

  <body>
    <section id="box">
      <button>
        Submit
      </button>
    </section>
  </body>
</html>

jsdev2023 · Accepted Answer · 2023-08-10 07:37:57Z

you can play with the concept of neo-brutalism.

here's how:

Add an active class that changes the position and the shadow simultaneously to give you the effect.

.btn {
  padding: 10px;
  width: fit-content;
  background-color: white;
  border: solid 1px blue;
  box-shadow: 10px 10px 0px 0 blue;
  font-family: inherit;


}
.btn:active {
    position: relative;
    top: 2px;
    box-shadow: 9px 8px 0 0 blue;
  }

<button class="btn">GET A QUESTION</button>

Collectives™ on Stack Overflow

Onclick CSS button effect [duplicate]

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

1 Comment

Comments

Comments

Linked

Related