Can I do this with a Form button

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?

<html lang="en">

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

  <!-- TITLE -->

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

      display: flex;
      justify-content: center;
      box-sizing: border-box;
      max-width: 30em;
      margin: 6em auto;
      padding: 2em 0;
      border: 1px solid #333;
      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;
      background: linear-gradient(to bottom, #FFBB4D, #FFEC64 70%);   /* Orange to Gold */
      background-image: none;     /* Can eliminate by using background: #FFBB4D; */
      background-color: #FFBB4D;                                      /* Orange */


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

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


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:


Hind sight’s 20/20.

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

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


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