CODEWITHSUNDEEP
jquerycssjquery-ui
Gloria Santin
Gloria Santin

Reputation: 2136

change active state for jquery-ui button

I am using jquery-ui 1.11. I have a button that I would like the active state to show that the button depresses when clicked. Using the default functionality that I copied from the jquery-ui website, the text changes color from blue to coral. I added a shadow to the button and I would like the active state to remove the box-shadow so that it looks like the button depresses when clicked. This is my HTML:

<div id="rotation_btn_div">
<input id="rotation_schedule_btn" type="button" value="Create Schedule" />
</div>

This is my jquery function:

$(function () {
   $("#rotation_schedule_btn")
    .button()
    .click(function (event) {             
     event.preventDefault();
  });
});

Removing .button() removes the changes when the button is clicked (ie changes the text from blue to coral). I would like to keep the text the same and just show the button as depressed when clicked. This is my .css:

input[type="submit"],
input[type="button"],
button {
    background-color: #d3dce0;
    border: 1px solid #787878;
    cursor: pointer;
    font-size: medium;
    font-weight: 600;
    padding: 7px;
    margin-right: 8px;
    width: auto;
    box-shadow: 5px 5px 5px #888888;
}

button:active {
    box-shadow: none;
}

Upvotes: 0

Views: 897

Answers (1)

Chitrang
Chitrang

Reputation: 2114

You want to apply CSS on input tag of type button so you can use CSS selector that way:

Use

input[type="button"]:active {
  box-shadow: none;        
}

instead of 

button:active {
  box-shadow: none;
}

EDIT: You can add margins to button to make it more look like depressed button. You can adjust margin based on the box-shadow values to get your desired effect.

input[type="button"]:active {
  box-shadow: none;  
  margin-top:3px;
  margin-left:3px;      
}

Upvotes: 1

Related Questions