How To Move Button To Right In CSS
Last Updated : Mar 11, 2024
IN - CSS | Written & Updated By - Anjali
In this tutorial we will show you the solution of how to move button to right in CSS, as we know css used to style html elements, here we used internal style method to align button to right hand side of webpage.
Here align means we need to locate or positioned our html elements on a particular place.
So we used css style property ‘float’ to align any button on any place in webpage as per our own thoughts.
Step By Step Guide On How To Move Button To Right In CSS :-
We can implement styles using three types (i.e inline,external or internal) Internal means we have to define our style within <style> tag in head block and inline means we have use style within element definition, external means we defined our css at separate file with .css extension we have to import by <link> tag within head block.
Here we used internal style method and in our program we defined one <button> tag with name ‘Click’ and attribute class ‘btn’.
By using this class name we aligned our button to the right side of page.
For align a button we need to use style property ‘float’ with value ‘right’ so it will aligned to right side.
<!DOCTYPE html>
<html>
<head>
<title>Align Button Right Side</title>
<style>
.btn{
float:right;
}
</style>
</head>
<body>
<button class="btn">Click</button>
</body>
</html>
- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is containing information about webpage and if you need any external file those links are declared here. <title> tag is used for set the webpage title.
- Here we defined <button> element styles. The ‘float’ property with value ‘right’ used to align ‘Click’ button on right hand side of webpage.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here <button> tag we defined with class attribute ‘btn’ and its styled by as we seen at point 4.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion we are able to know how to move button to the right side.
When we loads our program on browser we can see the alignment of ‘Click’ button and it is not need any internet connections or server support.
We can align any html elements like buttons or images,..etc at any place on webpage using ‘float’ property.
Same as we seen above with value ‘left’ used to align button to the left side of webpage also.
I hope this tutorial on how to move button to right in CSS helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
