CODEWITHSUNDEEP
css
Janice M
Janice M

Reputation: 45

How can I style an address link to make it look like an input button with CSS

I have been asked to make the address links on a web look like default buttons. I am not very familiar with CSS. Has anyone tried this? I just want them to look like normal normal buttons with gradient and things like that. Will I need to use a around it?

Upvotes: 0

Views: 5706

Answers (5)

Tavousi
Tavousi

Reputation: 15446

<html>
<head>
<style type="text/css">
a:link,a:visited
{
display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}
a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="default.asp" target="_blank">This is a link</a>
</body>
</html>

Upvotes: 0

GolezTrol
GolezTrol

Reputation: 116110

If you use a picture, it will look like that picture. Buttons will look different in each combination of OS and browser, so choosing a fixed button image, might confuse the user.

I think a better solution would be to insert the link and show it as a link, or apply minimal styling to give it a button appearance. Then, use Javascript/JQuery to really insert a button instead of the link and assign it an onclick event that makes it behave like the link.

That way, you will have a real button that behaves like a button and looks like a button would in the current browser. If users don't have Javascript (which applies to crawlers too), they will still have a possibility to use the link, which you can style anywhere from not-at-all to pretty-darn-button-like.

Upvotes: 1

melhosseiny
melhosseiny

Reputation: 10144

Here is the CSS of the buttons in the options page in Google Chrome. They use a button tag but I just replaced it with an a tag and it works too. This only works for webkit browsers but it should be easy enough to find out the corresponding/alternative declarations for other browsers. See this fiddle for a demo.

HTML

<a>Click me</a>

CSS

a {
  -webkit-border-radius: 2px;
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  -webkit-user-select: none;
  background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
  border: 1px solid #aaa;
  color: #444;
  font-size: inherit;
  margin-bottom: 0px;
  min-width: 4em;
  padding: 3px 12px 3px 12px;
  font-family: sans-serif;
}

a:hover {
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
  background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
  border-color: #999;
  color: #222;
}

a:active {
  -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.2);
  background: #ebebeb -webkit-linear-gradient(#f4f4f4, #efefef 40%, #dcdcdc);
  color: #333;
}

Upvotes: 2

Tavousi
Tavousi

Reputation: 15446

I don't understand why you are trying do this with CSS.You can insert a picture (similar to button) and create a link in its with HTML tags. If you are not familiar with CSS or HTML tags, you can use www.w3schools.com. This site is very very useful to create websites. I hope I could resolve your problem.

Upvotes: 0

fordareh
fordareh

Reputation: 2963

The first thing that you'll have to do is give it a display: block or inline-block attribute so that it can take all the margin/padding settings that you'll want it to have. Then, you may want to check out this awesome css3 styling app:

http://www.css3.me/

Upvotes: 0

Related Questions