• Register
100 points
5 1

This is a very common question that rise in beginner web developer’s mind.So here i am going to discuss a way from which you can change the position of button in html and also with proper understanding.

Let’s us go then.

I am giving you an example from which you can relate your code and  implement the steps which i illustrated here.

HTML Code

<!DOCTYPE html>
<html>
   <head>
      <title>Change the position of button</title>
   </head>
   <body>
      <form>
         <button class="btn" onclick="window.location.href = 'https://www.kodlogs.com';" value="kodlogs"/>
      </form>
   </body>
</html>

I am changing the position of button with the help of cascading style sheets(CSS) which is popular for desining or styling the website’s elements like:buttons,nav bar positions,footer positions etc.

CSS Code

.btn {
  position: relative;  /*you can set fixed or absolute or relative position as per your requirements*/
  padding: 30px;
 text-align:center;
}

The position property specifies the type of positioning method used for an element (static, relative, absolute or fixed).

  • Static:Default value.
  • Absolute:The element is positioned relative to its first positioned ancestor element.
  • Fixed:The element is positioned relative to the browser window.
  • Relative:The element is positioned relative to its normal position on the page.

1 Comment

This is not enough. I wrote a CSS file for my HTML Page but it make my page mess up. The stop button is behind the game frame.I have 4 buttons in a header div. I have placed them all using margins top and left in css so they are all next to each other in one line.I try myself i didn’t find any solution.