Html How to Move the Button to the Right
Sorry, If the Question Is Dumb Because I Am Just a Beginner in Html. How to Move My Button to the Right? I Have Tried Some Ways but It Doesn't Seem to Work...
Sorry, if the question is dumb because I am just a beginner in HTML. How to move my button to the right? I have tried some ways but it doesn't seem to work. Here is my code.
<!DOCTYPE html>
<html>
<head>
<title>Sample Dashboard</title>
<style type="text/css">
p.pos_right {
position: relative;
left: 20px;
}
.button_example{
border:1px solid #f9f68a; -webkit-border-radius: 3px; -moz-border-radius: 3px;border-radius: 3px;font-size:12px;font-family:arial, helvetica, sans-serif; padding: 10px 10px 10px 10px; text-decoration:none; display:inline-block;text- shadow: -1px -1px 0 rgba(0,0,0,0.3);font-weight:bold; color: #FFFFFF;
background-color: #fcfac0; background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfac0), to(#f6f283));
background-image: -webkit-linear-gradient(top, #fcfac0, #f6f283);
background-image: -moz-linear-gradient(top, #fcfac0, #f6f283);
background-image: -ms-linear-gradient(top, #fcfac0, #f6f283);
background-image: -o-linear-gradient(top, #fcfac0, #f6f283);
background-image: linear-gradient(to bottom, #fcfac0, #f6f283);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fcfac0, endColorstr=#f6f283);
}
.button_example:hover{
border:1px solid #f7f25f;
background-color: #faf68f; background-image: -webkit-gradient(linear, left top, left bottom, from(#faf68f), to(#f3ed53));
background-image: -webkit-linear-gradient(top, #faf68f, #f3ed53);
background-image: -moz-linear-gradient(top, #faf68f, #f3ed53);
background-image: -ms-linear-gradient(top, #faf68f, #f3ed53);
background-image: -o-linear-gradient(top, #faf68f, #f3ed53);
background-image: linear-gradient(to bottom, #faf68f, #f3ed53);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startC olorstr=#faf68f, endColorstr=#f3ed53);
}
</style>
</head>
<body>
<p class="pos_right">Most Number of Referrals for the month of </p>
<a class="button_example" href="#"><font color="black">UPDATE</font></a>
</body>
</html>
7 Answers
Many ways how to do that, for example float
.button_example {float: right}
With the help of CSS float property, you can align elements accordingly. Demo
.button_example{
float: right;
}
Simply add to
.button_example {
position:absolute;
top: 10px;
right:0;
}
Here's snippet
p.pos_right {
position: relative;
left: 20px;
}
.button_example {
position: absolute;
right: 0;
top: 15px;
border:1px solid #f9f68a;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size:12px;font-family:arial, helvetica, sans-serif;
padding: 10px 10px 10px 10px;
text-decoration:none;
display:inline-block;
text-shadow: -1px -1px 0 rgba(0,0,0,0.3);
font-weight:bold;
color: #FFFFFF;
background-color: #fcfac0;
background-image: -webkit-gradient(linear, left top, left bottom, from(#fcfac0), to(#f6f283));
background-image: -webkit-linear-gradient(top, #fcfac0, #f6f283);
background-image: -moz-linear-gradient(top, #fcfac0, #f6f283);
background-image: -ms-linear-gradient(top, #fcfac0, #f6f283);
background-image: -o-linear-gradient(top, #fcfac0, #f6f283);
background-image: linear-gradient(to bottom, #fcfac0, #f6f283);
filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=#fcfac0, endColorstr=#f6f283);
}
.button_example:hover{
border:1px solid #f7f25f;
background-color: #faf68f; background-image: -webkit-gradient(linear, left top, left bottom, from(#faf68f), to(#f3ed53));
background-image: -webkit-linear-gradient(top, #faf68f, #f3ed53);
background-image: -moz-linear-gradient(top, #faf68f, #f3ed53);
background-image: -ms-linear-gradient(top, #faf68f, #f3ed53);
background-image: -o-linear-gradient(top, #faf68f, #f3ed53);
background-image: linear-gradient(to bottom, #faf68f, #f3ed53);filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0,startC olorstr=#faf68f, endColorstr=#f3ed53);
}<p class="pos_right">Most Number of Referrals for the month of </p>
<a class="button_example" href="#"><font color="black">UPDATE</font></a>You can also move you button to right by applying text-align: right; to it's parent. In your case it's parent is body.
So you can apply css like:
body {
text-align: right;
}
Note: It make your p tag also align to right.
Depending on how much space you want to move it to the right add this to .button_example:
margin-left:100px;
You can also do it as a percentage:
margin-left: 75%;
It will move when resizing the page, whereas with pixels it will try to stay at 100px from the left of the page. It all depends on the result you want when resizing the window.
I found for my button I had to use:
right:-198px;
position: relative;
Obviously, play around with your own right px, and do it on the developer tools in the browser to get it perfect, but that is what worked for me.
Maya is a hardware enthusiast who tests and reviews smart home devices, smartphones, wearables, and audio gear. She focuses on practical consumer value and build quality.
