CODEWITHSUNDEEP
csshtml
Sloger
Sloger

Reputation: 41

Need CSS styles for default input/submit button

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.

Upvotes: 4

Views: 19722

Answers (3)

Manoj
Manoj

Reputation: 347

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

Upvotes: 6

AniCollected
AniCollected

Reputation: 1

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

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

These are my thoughts;

  1. You need to use either the <button> element placed inside the <a> element. The <button> element will create a default button without any css.
  2. 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>

Upvotes: -1

ProfessorRoundain
ProfessorRoundain

Reputation: 1

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

Upvotes: -2

Related Questions