Can I do this with a Form button

HTML & CSS
1

Hello. Below is code that takes an HTML anchor and styles it to look like a button.

Is it possible to use my CSS and style an HTML submit button to look and behave the same way?

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

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

  <!-- TITLE -->
  <title>sp_button-example.html</title>

  <!-- CSS STYLES -->
  <style media="screen">
    html, body{
      margin: 0;
      padding: 0;
    }
    
    body{
      font-family: Helvetica, Arial, Sans-Serif;
      font-weight: normal;
      line-height: 1.4em;
      font-size: 0.9em;
    }

    #wrapper{
      display: flex;
      justify-content: center;
      box-sizing: border-box;
      max-width: 30em;
      margin: 6em auto;
      padding: 2em 0;
      border: 1px solid #333;
    }
    
    .myButton{
      display: inline-block;
      margin: 0 0.5em 0 0;
      padding: 0.2em 0.8em 0.1em 0.8em;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: bold;
      text-decoration: none;
      color: #000;                                                    /**/
      border: 1px solid #FFBB4D;                                      /* Orange */
      border-radius: 6px;
      background: linear-gradient(to bottom, #FFEC64 50%, #FFBB4D);   /* Gold to Orange */
      cursor: pointer;
    }
    
    .myButton:hover{
      background: linear-gradient(to bottom, #FFBB4D, #FFEC64 70%);   /* Orange to Gold */
    }
    
    .myButton:active{
      background-image: none;     /* Can eliminate by using background: #FFBB4D; */
      background-color: #FFBB4D;                                      /* Orange */
    }

  </style>
</head>

<!-- *************************  HTML BODY  ********************************* -->
<body>
  
  <div id="wrapper">
    <a href="" class="myButton">Link styled as a Button</a>
  </div>
  
</body>
</html>

Of particular interest is re-using the linear-gradient and hover and active.

Thanks.

2

Hi there UpstateLeafPeeper,

Are you not aware of the Suck It And See method of coding?

Using this as an example…

   <a href="" class="myButton">Link styled as a Button</a>

…would result in this…

   <input type="submit" class="myButton" value="Link styled as a Button">

It is definitely a method that you should practice more often. :rofl:

coothead

4

Hind sight’s 20/20.

I didn’t think the background: linear-gradient would work on an < input >

5

“Suck it and see” then think about stuff. :biggrin:

coothead

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.