...

View Full Version : buttons side by side



charisma44
11-25-2012, 08:49 PM
How would I put two or more buttons side by side?


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


/*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 -
<!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 -
<!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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum