Reputation: 1940

How to make HTML button look pressed in using css?

How do I style a button, with a shadow, so that it looks like it is pressed in?

I tried using box-shadow: ... ;. But this didn't have any affect.

Upvotes: 29

Answers (8)

cssyphus

Reputation: 40038

A combination of borders and box-shadow and a slightly darker background can be striking.

A Single Colored Button - Is It Already Depressed?

const $ = document.querySelector.bind(document);
let btnState = true;

$('button').addEventListener('click', click_toggleBtnClass );

function click_toggleBtnClass(){
  if (btnState){
    $('#myButt').classList.remove('btnActive');
    btnState = false;
  } else {
    $('#myButt').classList.add('btnActive');
    btnState = true;
  }
}

body{
  padding:10px;
  font-size:3rem;
  background:black;
 }

button{
  min-width:230px;
  padding:8px 20px;
  color:#ccc;
  background:dodgerblue;
  font-size:inherit;
  border:1px solid cyan;
  border-radius:4px;
  cursor:pointer;
  user-select:none;
  box-shadow:inset 3px 3px 3px dodgerblue;
}

.btnActive { 
  color:greenyellow;
  background:#2a72b9;
  font-size: 0.95em;

  border-top:2px solid grey;
  border-left:2px solid grey;
  border-bottom:2px solid #ebe4e4;
  border-right:2px solid #ebe4e4;

  text-shadow:-1px -1px 0px #333, -1px -1px 0px #333;
  box-shadow:inset 2px 2px 7px #222;
}
div{margin-top:30px;font-family:sans-serif;font-size:2rem;color:cyan;}

<button id="myButt" class="btnActive">Click Me</button>
<div>Is this button currently pressed?<br>Click to find out</div>

Same again, but in Grey-on-White

const $ = document.querySelector.bind(document);
let btnState = true;

$('button').addEventListener('click', click_toggleBtnClass );

function click_toggleBtnClass(){
  if (btnState){
    $('#myButt').classList.remove('btnActive');
    btnState = false;
  } else {
    $('#myButt').classList.add('btnActive');
    btnState = true;
  }
}

body{
  padding:10px;
  font-size:3rem;
  background:white;
 }

button{
  min-width:230px;
  padding:8px 20px;
  color:#333;
  background:#ccc;
  font-size:inherit;
  border:1px solid grey;
  border-radius:4px;
  cursor:pointer;
  user-select:none;
  box-shadow:inset 3px 3px 3px #ccc;
}

.btnActive { 
  color:greenyellow;
  background:#bbb;
  font-size: 0.95em;

  border-top:2px solid grey;
  border-left:2px solid grey;
  border-bottom:3px solid #eed;
  border-right:3px solid #eee;

  text-shadow:-1px -1px 0px #777, -1px -1px 0px #777;
  box-shadow:inset 2px 2px 4px #222;
}
div{margin-top:30px;font-family:sans-serif;font-size:2rem;color:royalblue;}

<button id="myButt" class="btnActive">Click Me</button>
<div>Is this button currently pressed?<br>Click to find out</div>

Three Grey-on-White buttons, as radio-buttons

const $ = document.querySelector.bind(document);
const $$ = document.querySelectorAll.bind(document);

$('#myButt').addEventListener('click', click_toggleBtnClass );
$('#urButt').addEventListener('click', click_toggleBtnClass );
$('#laButt').addEventListener('click', click_toggleBtnClass );

function click_toggleBtnClass(e){
  removeActiveFromAllButtons();
  const id = e.target.id;
  
  if (e.target.classList.contains('btnActive') ){
    $(`#${id}`).classList.remove('btnActive');
  } else {
    $(`#${id}`).classList.add('btnActive');
  }
}
function removeActiveFromAllButtons(){
  $$('button').forEach( btn => {
    btn.classList.remove('btnActive');
  });
}

body{
  padding:10px;
  font-size:2rem;
  background:white;
 }

button{
  padding:8px 20px;
  color:#333;
  background:#ccc;
  font-size:inherit;
  border:1px solid grey;
  border-radius:4px;
  cursor:pointer;
  user-select:none;
  box-shadow:inset 3px 3px 3px #ccc;
}

.btnActive { 
  color:greenyellow;
  background:#bbb;
  font-size: 0.95em;

  border-top:2px solid grey;
  border-left:2px solid grey;
  border-bottom:3px solid #eed;
  border-right:3px solid #eee;

  text-shadow:-1px -1px 0px #777, -1px -1px 0px #777;
  box-shadow:inset 3px 3px 4px #222;
}

div{display:inline-block; min-width:110px;}

<div><button id="myButt">Juan</button></div>
<div><button id="urButt">True</button></div>
<div><button id="laButt" class="btnActive">Free</button></div>

Upvotes: 0

cssyphus

Reputation: 40038

If you think visually about what happens when a push-button (like on an old-style stereo system) is pushed in, the button moves back. Visually, the face of the button is darker. The text on the button is inset. The border of the button is dark.

The other answers here all give part of the answer.

This visually does all of the above:

.btnPushed {
  color: #efefef; //orig text color was #FFF
  text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
  box-shadow: inset 1px 1px 4px #222;
  transform: translateY(1px); /*  Add per Vince's helpful comment  */
}

As you might notice, we apply the styling by adding a class.

$('button').click(function(){
  $('button').removeClass('depressed');
  $(this).addClass('depressed');
});

button {
   border: 1px solid black;
   border-radius: 3px;
   color: #f5f5f5;
   background-color: #b8860b;
   background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
   cursor: pointer;
   font-size: 14px;
   line-height: 20px;
   outline: none; /* Removes Chrome's blue outline */
   margin: 2px;
}
button:active{
}
.depressed{
   color: #efefef;
   text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
   box-shadow: inset 1px 1px 3px #222;
   margin: 3px -1px -1px 3px; /* T R B L */
   transform: translateY(1px);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<button>Button1</button>
<button>Button2</button>
<button class="depressed">Button3</button>
<button>Button4</button>

To avoid the adjustment (movement) of the other buttons due to the margin change, just put each button into a fix-size div. That way the buttons move around within their divs, without affecting the other buttons inside their own divs.

$('button').click(function(){
  $('button').removeClass('depressed');
  $(this).addClass('depressed');
});

body{background:lightblue;font-size:1.1rem;}
div {
   display: inline-block;
   width: 65px;
   height: 25px;
}
button {
   border: 1px solid black;
   border-radius: 3px;
   color: #f5f5f5;
   background-image: linear-gradient(-180deg,#6699FF,#3473F5 90%);
   cursor: pointer;
   font-size: 14px;
   line-height: 20px;
   outline: none; /* Removes Chrome's blue outline */
   margin: 2px;
}
button:active{
}
.depressed{
   color: greenyellow;
   text-shadow: -1px -1px 0px #777, -1px -1px 0px #777;
   box-shadow: inset 1px 1px 3px #222;
   margin: 3px -1px -1px 3px; /* T R B L */
   transform: translateY(1px);
   border-top:1px solid black;
   border-left:1px solid black;
   border-right:1px solid #ccc;
   border-bottom:1px solid #ccc;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div><button>Button1</button></div>
<div><button>Button2</button></div>
<div><button class="depressed">Button3</button></div>
<div><button>Button4</button></div>

Update:

Added transform: translateY(1px), per Vince's helpful comment below.

Upvotes: 1

Sondre

Reputation: 301

As an alternative to buttons, there is also a possibility to simply use checkbox with the pseudo-class :checked to toggle between states.

label.label-checkbox {
  cursor: pointer;
}


label.label-checkbox input {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  pointer-events: none;
}

label.label-checkbox span {
  padding: 11px 21px;
  border: 1px solid #ccc;
  display: inline-block;
  color: #202020;
  border-radius: 6px;
  margin: 7px;
  background: #f5f5f5;
  user-select: none;
}

label.label-checkbox input:checked + span {
  box-shadow: inset 1px 2px 5px #777;
  transform: translateY(1px);
  background: #e5e5e5;
}

<h1>Pressed buttons with Checkbox</h1>

<label class="label-checkbox">
  <input type="checkbox">
  <span>Checkbox</span>
</label>
<label class="label-checkbox">
  <input type="checkbox" checked>
  <span>Styled</span>
</label>
<label class="label-checkbox">
  <input type="checkbox">
  <span>As</span>
</label>
<label class="label-checkbox">
  <input type="checkbox" checked>
  <span>Pressed</span>
</label>
<label class="label-checkbox">
  <input type="checkbox">
  <span>Buttons</span>
</label>

Upvotes: 19

Abby boy

Reputation: 1

button{
background-color:grey;
padding:10px;
border:none;
color:white;

}
button:hover{
background-color:black;
color:white;
}

<button class"b1">button</button>

Upvotes: -3

rahul patil

Reputation: 11

.button{
color: white;
background-color: blue;
padding: 8px 25px;
border-radius : 7px;
}
.button:active {
    box-shadow: 0 0 0 black;
    margin: 3px 0 0 0 ;
}

<input type="button" class="button" value="Enter">

Upvotes: -1

John Henckel

Reputation: 11357

The best way is to nudge the button lower on the page. Using transformY would be the most straight-forward. However that can mess up the layout of other things in the page. So I think that it is better to use margin to temporarily lower the button, such as,

button {
    background-color: white;
    padding: 10px;
    vertical-align: top;
    box-shadow: 2px 1px 2px gray;
    margin: 4px 10px 4px 10px;
}

button:active {
    box-shadow: 0 0 0 white;
    margin: 6px 10px 2px 10px;
}

<button>click me</button>
<button>click me</button>
<br>
<button>click me</button>
<button>click me</button>

As in the example, you can take away 2px from the bottom margin, and add 2px to the top margin, therefore you preserve the total size of the button.

You need vertical-align in case there are more than one button.

Upvotes: 7

Red

Reputation: 7299

By creatively styling the :active or :focus pseudo classes using a box-shadow: inset ...;

Using the :active pseudo class:

button {
  background: #ededed;
  border: 1px solid #ccc;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
}

button:active {
  background: #e5e5e5;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
   outline: none;
}

<button>
  Click me
</button>

Using the :focus pseudo class:

button {
  background: #ededed;
  border: 1px solid #ccc;
  padding: 10px 30px;
  border-radius: 3px;
  cursor: pointer;
}

button:focus {
  background: #e5e5e5;
  outline: none;
  -webkit-box-shadow: inset 0px 0px 5px #c1c1c1;
     -moz-box-shadow: inset 0px 0px 5px #c1c1c1;
          box-shadow: inset 0px 0px 5px #c1c1c1;
}

<button>
  Click me
</button>

Upvotes: 55

therealbischero

Reputation: 224

I think that the best way to make a button looks like it's pressed it's to make it a little darker.

button{
  background-color: #03A9F4;
  border: none;
  padding: 15px 25px;
  text-transform: uppercase;
  color: white;
  font-weight: 700;
  border-radius: 3px;
}
button:hover, button:focus{
  background-color: #0074a9;
  outline: none;
}

<button>Button</button>

Upvotes: 3

How to make HTML button look pressed in using css?

Answers (8)

Same again, but in Grey-on-White

Three Grey-on-White buttons, as radio-buttons

Update:

Related Questions