Home/ Questions/Q 6614909
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T20:23:46+00:00

I had a designer help me make links that look like buttons that look

  • 0

I had a designer help me make links that look like buttons that look something like this: http://www.comehike.com/hikes/scheduled_hike.php?hike_id=233 (the yellow buttons are the RSVP, Ride, Drive, etc.)

Those are not images. They are just styled links.

My question is – can I make a similar type of non-image button for the buttons that are submit buttons in forms?

Thanks!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Submit button with hover effect. 

    <!doctype html>
    <head>
    <style>

    .button{
      -moz-border-radius:6px;
      -webkit-border-radius:6px;
      border-radius: 6x;
      border: 1px solid #ABABAB;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#E1E1E1), to(#F7F7F7));
      background-image: -webkit-linear-gradient(top, #E1E1E1, #F7F7F7);
      background-image: -moz-linear-gradient(top, #E1E1E1, #F7F7F7);
      background-image: -ms-linear-gradient(top, #E1E1E1, #F7F7F7);
      background-image: -o-linear-gradient(top, #E1E1E1, #F7F7F7);
      background-image: linear-gradient(top, #E1E1E1, #F7F7F7);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#E1E1E1', EndColorStr='#F7F7F7');
      padding: 15px 0px;
      margin: 0 auto;
      width: 224px;
      display: block;
      color: #434953;
      text-transform: uppercase;
      font: 182% "League Gothic", Helvetica, Arial, sans-serif;
      text-decoration:none;
      text-align:center;
    }

    .button:hover{
      border: 1px solid #ABABAB;
      color: #303030;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#F7F7F7), to(#E1E1E1));
      background-image: -webkit-linear-gradient(top, #F7F7F7, #E1E1E1);
      background-image: -moz-linear-gradient(top, #F7F7F7, #E1E1E1);
      background-image: -ms-linear-gradient(top, #F7F7F7, #E1E1E1);
      background-image: -o-linear-gradient(top, #F7F7F7, #E1E1E1);
      background-image: linear-gradient(top, #F7F7F7, #E1E1E1);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#F7F7F7', EndColorStr='#E1E1E1');
      -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
      -moz-box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
      box-shadow: 0px 0px 5px rgba(0,0,0,0.10) inset;
    }
    </style>

    </head>
    <body>
        <input type="submit" class="button" value="submit" />
    </body>
    • 0