Make a command button look like a link?

Hello. I am working on a shopping cart which needs to have a way for people to update and delete items in their cart.

I am trying to avoid having buttons for these functions because of space constraints.

Is any way to use CSS to style a form command button to make it look like a simple HTML hyperlink?

Ideally something like this…

Update | Delete

Yesterday @DaveMaxwell showed me a pretty neat trick to make a form option button (radio button) look like a square button, so I am wondering if something similar can be done here? :wonky:

Hi there UpstateLeafPeeperr,

just remove that which makes them look like buttons…


  <input type="button" value="Update"> |


input[ type=button],
button {
     border: 0;
     background-color: transparent;
     font-size: 1em;
1 Like


I’m not following why you have an < input > tag and a < button > tag? I am only familiar with the < input > tag.

As far as I know, there are only two types of button that
display text. :winky:

Your original post did not specify input. :unhappy:

So I displayed CSS that would show you that the code is
the same for both types, just in case you were not totally
familiar with one or the other. :biggrin:


Yes, I am not familiar with < button >.

I will have to put that on my To-Do list when I start learning HTML5 next year.

Hi there UpstateLeafPeeper,

the button element predates HTML5. :biggrin:



Then I’m behind the times on my HTML knowledge!

No Problem, you can easy rectify that…

HTML 4 Elements:- :biggrin:


Thanks for the help!

<html lang="en">

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">


  <style media="screen">
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
      color: #000;

      width: 400px;
      margin: 50px auto;

    form fieldset{
      padding: 30px;  
      display: block;
      margin: 0 0 30px 0;  

      display: inline;
      padding: 0;
      border: 0;
      background-color: transparent;
      font-size: 1em;
      color: #AAA;
      text-decoration: underline;

  <form id="test" action="" method="post">
      <label for="quantity">Quantity:</label>
      <input id="quantity" name="quantity" type="text" maxlength="3" value="" />
      <!-- Submit Form -->
      <input name="update" type="submit" class="linkButton" value="Update" /> |
      <input name="delete" type="submit" class="linkButton" value="Delete" />