CSS button error?

Question

I have my css button that wont work, it only comes up as a simple hyper link.. I have it all setup right with the css reference and everything.. Heres a look at my code:

.B1 {
	background-color:#44c767;
	-moz-border-radius:16px;
	-webkit-border-radius:16px;
	border-radius:16px;
	border:4px solid #18ab29;
	display:inline-block;
	cursor:pointer;
	color:#ffffff;
	font-family:arial;
	font-size:17px;
	padding:18px 63px;
	text-decoration:none;
	text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
	background-color:#5cbf2a;
}
.B1:active {
	position:relative;
	top:1px;
}

<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="file:///Users/lucasaltmann/Desktop/styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>

CSS is top and HTML is bottom. It runs fine when I run it on here but its not working for me..

PS: I am running mac snow leopard and firefox (Chrome did not work either)

What about is isn't working? It looks to be working to me when I run the code snippet. — David Lerner
– David Lerner, Commented Nov 16, 2014 at 1:55
I don't see anything wrong with the code. This might be a shot in the dark, but try setting your classname in lowercase characters. It might be a case sensitiveness issue. — Andres SK
– Andres SK, Commented Nov 16, 2014 at 1:56
@andufo, that's not the problem. He said his code is working fine in this code snippet, but not on his site. Sorry, Lucas, but it seems that your problem is not replicatable. — Ian Hazzard
– Ian Hazzard, Commented Nov 16, 2014 at 1:57
Then upload the .html file to your host and watch it suddenly, magically become a site. What is inside of styles2.css? Did you paste the entirety of that document here? — David Lerner
– David Lerner, Commented Nov 16, 2014 at 2:02

2by · Accepted Answer · 2014-11-16 02:04:59Z

1

It works here but not on your computer - well the CSS is probably not loaded correctly. You have an absolute path to the CSS file, so try this instad:

<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<link rel="stylesheet" type="text/css" href="styles2.css">
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>

Put you .html and style2.css in the same folder and it should work.

Another solution:

Replace your html with this:

<!DOCTYPE html>
<html>
<title>Tutorial</title>
<head>
<style>
.B1 {
    background-color:#44c767;
    -moz-border-radius:16px;
    -webkit-border-radius:16px;
    border-radius:16px;
    border:4px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:arial;
    font-size:17px;
    padding:18px 63px;
    text-decoration:none;
    text-shadow:1px 0px 8px #2f6627;
}
.B1:hover {
    background-color:#5cbf2a;
}
.B1:active {
    position:relative;
    top:1px;
}
</style>
</head>
<body bgcolor="Green">
<center>
<h1 style="color:orange">Welcome to CocoaCraft!</h1>
<a class="B1" href="http://cocoacraftnetwork.buycraft.net">Donate</a>
</center>
</body>
</html>

Now the CSS is inside the html file.

answered Nov 16, 2014 at 2:04

2by

1,0935 gold badges25 silver badges40 bronze badges

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

2 Comments

David Lerner Over a year ago

While technically correct, these methods are outside of best practices and just lead to messy files/directories.

Ian Hazzard Over a year ago

In some cases, you are correct, @DavidLerner. This is possibly a good solution for the OP.

Collectives™ on Stack Overflow

CSS button error?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related