buttons side by side

charisma44 · 11-25-2012, 08:49 PM

How would I put two or more buttons side by side?

Code:

<p><a href="#" class="css-button">Download</a></p>

Code:

/*css for buttons in destinations starts here*/


a.css-button {
	
		font-size:16px;
		color:#000;
		text-decoration:none;
		display:block;
		width:90px;
		padding:10px;
		border:2px solid #000;
		text-align:center;

		-moz-border-radius:5px;
		-webkit-border-radius:5px;
		-o-border-radius:5px;
		border-radius:5px;
		background:#FFFFFF;
		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .4s ease-in-out;
		-o-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;
	}
	a.css-button:hover {
		color:#fff;
		border-color:#000;
		background:#000;
	}
	a.css-button.notransitions {
		-webkit-transition: none;
		-moz-transition: none;
		-o-transition: none;
		transition: none;
	}
/*css for buttons in destinations ends here*/

Excavator · 11-25-2012, 09:14 PM

Hello chrarisma44,
Why are your anchors wrapped in block level paragraph tags if you want your anchors inline...which is their normal behaviour.

I'm not saying that's invalid, it's just opposite what you're trying to do.

Look at it this way -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;	
	padding: 200px 0 300px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
</style>
</head>
<body>
    <div id="container">
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <!--end container--></div>
</body>
</html>

Excavator · 11-25-2012, 09:16 PM

Once you do away with the <p> tags, you can add your styling with one small change that I've highlighted in red -

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin: 0;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 30px auto;
	padding: 200px 0 300px;
	background: #fff;
	box-shadow: 0 0 20px #8493A6;
	overflow: auto;
}
a.css-button {
	font-size: 16px;
	color: #000;
	text-decoration: none;
	display: inline-block;
	width: 90px;
	padding: 10px;
	border: 2px solid #000;
	text-align: center;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	-o-border-radius: 5px;
	border-radius: 5px;
	background: #FFFFFF;
	-webkit-transition: all .4s ease-in-out;
	-moz-transition: all .4s ease-in-out;
	-o-transition: all .4s ease-in-out;
	transition: all .4s ease-in-out;
}
a.css-button:hover {
	color: #fff;
	border-color: #000;
	background: #000;
}
a.css-button.notransitions {
	-webkit-transition: none;
	-moz-transition: none;
	-o-transition: none;
	transition: none;
}
</style>
</head>
<body>
    <div id="container">
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <a href="#" class="css-button">Download</a>
    <!--end container--></div>
</body>
</html>

charisma44 · 11-25-2012, 09:22 PM

Yours are vertical, not horizontal lol

charisma44 · 11-25-2012, 09:26 PM

Thank you. Got it now.