How can I style an address link to make it look like an input button with CSS
Question
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?
5 answers
solution1
2 2011-05-22 13:19:36
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;
}
solution2
1 2011-05-22 13:39:21
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.
solution3
0 2011-05-22 13:04:03
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:
solution4
0 2011-05-22 13:06:33
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.
solution5
0 2011-05-23 07:51:51
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.