CODEWITHSUNDEEP
htmlcssbuttononclick
Kimberley Furson
Kimberley Furson

Reputation: 495

Onclick CSS button effect

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

Upvotes: 20

Views: 157651

Answers (5)

jsdev2023
jsdev2023

Reputation: 568

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>

Upvotes: 0

Ronnie Smith
Ronnie Smith

Reputation: 18585

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

enter image description here

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>

Upvotes: 1

Vangel Tzo
Vangel Tzo

Reputation: 9313

You should apply the following styles:

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

This will give you the necessary effect, demo here.

Upvotes: 23

Davi Trenou
Davi Trenou

Reputation: 69

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!

Upvotes: 6

Zuhair
Zuhair

Reputation: 95

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.

Upvotes: 10

Related Questions