• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 705
  • Last Modified:

CSS: Make Link and Input Button Look the Same

Using only CSS and valid HTML4, how can we get the link and input button to look exactly the same?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style type="text/css">

input, a {
	text-transform: capitalize;
	color: #6e6e6e;
	text-align: center;
	font: bold 12px Helvetica, Arial, sans-serif;
	text-decoration: none;
	padding: 3px 7px;
	position: static;
	display: inline-block;
	background: #F6F6F6;
	border: solid 1px #dcdcdc;
	cursor: pointer;
	height: auto;
	width: auto;
	overflow: visible;
	margin: 10px;

  <a href="/continueshopping/">Continue Shopping</a>

  <input type="button" value="Continue shopping" /><br />
  <input type="button" value="Continue shopping" /><br />

Open in new window

  • 2
3 Solutions
Looks the same, what browser?
Think it's FF you're seeing the problem in so add this before your css
input::-moz-focus-inner {
    border: 0;
    padding: 0;

Open in new window

text-decoration: underline;
input.button {
    cursor: pointer;
    cursor: hand;
        background-color: transparent;
    text-decoration: underline;

.button {
    font: bold 11px Arial;
    text-decoration: none;
    background-color: #EEEEEE;
    color: #333333;
    padding: 2px 6px 2px 6px;
    border-top: 1px solid #CCCCCC;
    border-right: 1px solid #333333;
    border-bottom: 1px solid #333333;
    border-left: 1px solid #CCCCCC;

<a href="somepage.html"><button type="button">Text of Some Page</button></a>
Vinay RajputSr. UI LeadCommented:
Hi Hanknight,

I guess IE is not behaving properly with the input tag, and its showing it pressed on click,

which i have solved by adding a input:active class,

PFA file
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

The 14th Annual Expert Award Winners

The results are in! Meet the top members of our 2017 Expert Awards. Congratulations to all who qualified!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now