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…

HTML:-

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

CSS:-


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

@coothead,

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:

coothead

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:

coothead

2 Likes

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

No Problem, you can easy rectify that…

HTML 4 Elements:-

https://www.w3.org/TR/html4/index/elements.html :biggrin:

coothead

Thanks for the help!

<!DOCTYPE HTML>
<html lang="en">

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

  <title>z_test.html</title>

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

    form{
      width: 400px;
      margin: 50px auto;
    }

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

    .linkButton{
      display: inline;
      padding: 0;
      border: 0;
      background-color: transparent;
      font-size: 1em;
      color: #AAA;
      text-decoration: underline;
    }
  </style>
</head>

<body> 
  <form id="test" action="" method="post">
    <fieldset>
      <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" />
    </fieldset>
  </form>
</body>

</html>