Menu
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>
255
You can wrap the buttons with container divs and leverage Flexbox to justify the contents in the center. It's important to give the buttons the same size, so that they align properly, and scale the containing divs accordingly so that the buttons don't overflow or wrap.
Just add position:absolute; top:0; right:0; to the CSS for your button.
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;
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
