Need CSS styles for default input/submit button

Question

Can someone advice CSS styles for default input/submit button please? I need to mimic a default input/submit button with css. The default button is the one, which browser creates once you specify input type="button" in your HTML. I need to use the button that would look like default input/submit button inside href, but using button inside href is not legal in HTML5. So I want to do the following:

<a href="#"><span class="button">Input button</span></a>

Just need css for my class .button that would create the button that looks like default input/submit button.

Thank you all in advance.

"Looks like the default" in which browser? Different browsers style the default button differently. And by "input/submit button" do you mean <input type="submit">? — henry
– henry, Commented Sep 2, 2016 at 23:58

Manoj · Accepted Answer · 2016-09-06 15:43:30Z

6

I hope this will work for you

.button {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.16, rgb(207, 207, 207)), color-stop(0.79, rgb(252, 252, 252)));
  background-image: -moz-linear-gradient(center bottom, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%);
  background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); 
  padding: 3px;
  border: 1px solid #000;
  color: black;
  text-decoration: none;
}

<a class="button" href="somlink.html">button</a>

you need to select proper background-image as different browser renders in different manner

Edit: added background-image: linear-gradient(to top, rgb(207, 207, 207) 16%, rgb(252, 252, 252) 79%); for IE10 and above

edited Sep 6, 2016 at 15:43

answered Sep 2, 2016 at 21:26

Manoj

3471 silver badge12 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sloger Over a year ago

Thank you Manoj! This is by far the best css I got. Firefox and Chrome display this code identical to other default buttons that I have on page. IE, as usual, does not render background-image at all. Is there any conditional or additional css that I could use for IE?

Manoj Over a year ago

@Sloger , yes you can use -ms-linear-gradient is supported in IE 10 please refer this link to use for previous version,[link] css-tricks.com/css3-gradients

Sloger Over a year ago

I am adding: background-image: -ms-linear-gradient ( center bottom, rgb(207,207,207) 16%, rgb(252,252,252) 79%); for IE but it does nothing. Is this a correct code?

Manoj Over a year ago

please use <code> background-image: linear-gradient(to top, rgb(207,207,207) 16%, rgb(252,252,252) 79%);</code>

Sloger Over a year ago

Thank you, it worked. With minor tweaking I managed it to look very similar to default submit buttons. I changed "border-radius" to 2px, and border:1px solid #777777;

Mr Lister · Accepted Answer · 2016-09-04 08:36:09Z

-1

If I understand you correctly, what you want to do is;

Create a default button with html
Make the button a link that will redirect to another page when clicked with the <a href=#> element.

These are my thoughts;

You need to use either the <button> element placed inside the <a> element. The <button> element will create a default button without any css.
You can use <input> element with the type attribute set to submit. Place it inside the <a> element and you will have your default button that links to wherever you want.

Below is the code to show examples. I hope it solves your problem.

<!DOCTYPE html>
<html>
<body>

<a href="http://www.google.com"><button>Submit</button></a>

<a href="http://www.google.com"><input type="Submit" value="Submit"></a>

</body>
</html>

edited Sep 4, 2016 at 8:36

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Sep 2, 2016 at 22:09

AniCollected

11 bronze badge

1 Comment

Mr Lister Over a year ago

Don't nest interactive elements. The OP's problem is that nesting like that is illegal, and you're just replacing some illegal markup with some other illegal markup. Not a solution at all.

ProfessorRoundain · Accepted Answer · 2016-09-03 10:28:43Z

-2

Use bootstrap... http://getbootstrap.com/getting-started/, find templates here https://bootswatch.com/cosmo/

You could, as well, use semantic-ui.com.

I hope I helped you :D

answered Sep 3, 2016 at 10:28

ProfessorRoundain

13 bronze badges

Collectives™ on Stack Overflow

Need CSS styles for default input/submit button

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related