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?
Asked
Active
Viewed 5,641 times
0
-
1When you say an "address link" do you mean `` elements? – Marcin May 22 '11 at 12:18
-
1Possible duplicate of [How To Style Anchor Tag To Look Like A Button](http://stackoverflow.com/questions/1121823/how-to-style-an-anchor-tag-to-look-like-a-button-with-the-same-height-as-the-butt) – ditkin May 22 '11 at 12:21
-
I like the solution presented there, however I would go about setting the background image differently. Use of CSS background images would allow a mousehover to place a highlight effect on the button, whilst CSS3 multiple background images would allow the width to vary but the button to fit nicely every time. – lpd May 22 '11 at 12:32
-
Yes that's correct the element. Alternatively is there any way that I can replace an address link with a button. Something that google would still follow? – Janice M May 22 '11 at 12:39
-
This is a duplicate of http://stackoverflow.com/questions/710089/how-do-i-make-an-html-link-look-like-a-button. – Mark Amery Oct 04 '15 at 14:21
5 Answers
2
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;
}
melhosseiny
- 9,992
- 6
- 31
- 48
1
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.
GolezTrol
- 114,394
- 18
- 182
- 210
0
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:
fordareh
- 2,923
- 2
- 26
- 39
0
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.
Tavousi
- 14,848
- 18
- 51
- 70
0
<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>
