Resize Button to Match?

sandshakimi used Ask the Experts™
I need the Cancel button to have the same dimension as the Save button.

Screen Capture
Here's the markup:

<div class="form-actions form-wrapper" id="edit-actions"><button type="button" value="Cancel" onClick="javascript: history.go(-1)">Cancel</button><input type="submit" id="edit-submit" name="op" value="Save" class="form-submit" /></div>

Open in new window

Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Senior Software Developer
The issue is that one is a <button> and the other is an <input> element. You can solve this by using a little CSS

Here's a jsfiddle that demonstrates
Scott FellDeveloper & EE Moderator
Fellow 2018
Most Valuable Expert 2013

No points.  A small update to Russ's code.

Make both buttons instead of button and input.  Make buttons same height and width and added padding.
<!DOCTYPE html>
  <meta charset="utf-8">
    height: 40px;
    width: 80px;
<div class="form-actions form-wrapper" id="edit-actions">
  <button type="button" value="Cancel" onClick="javascript: history.go(-1)">Cancel</button>
  <button type="submit" id="edit-submit" name="op"  class="form-submit">Save</button>

Open in new window


These are dynamically generated so Russ's approach is the one I was able to use.

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial