How to move a button in CSS?

Asked

Viewed 2,422 times

3

Good morning! I am facing problems with positioning a CSS button.

I wanted to move each of these four buttons to a specific side, but I don’t know how.

.button {
           background-color: #4CAF50; /* Green */
           border: none;
           color: white;
           padding: 16px 32px;
           text-align: center;
           text-decoration: none;
           display: inline-block;
           font-size: 60px;
           margin: 40px 2px;
           -webkit-transition-duration: 0.4s; /* Safari */
           transition-duration: 0.4s;
           cursor: pointer;
         }
         
         
         .button5 {
           background-color: white;
           color: black;
           border: 2px solid #555555;
         }

         #historia{
            
            
         }
         #cartazes{
            
            
         }
         #fotos{
            
            
         }
         #videos{
            
            
         }

         
         .button5:hover {
           background-color: #555555;
           color: white;
         }
     
</head>
<body>

<div id='cssmenu'>
<ul >
   
      
         </head>
         <body>
         
         
         <button onclick="location.href='http://localhost/pap/historia.html'" type="button" class="button button5" id="historia">História</button>
         <button class="button button5" id="cartazes">Cartazes</button>
         <button class="button button5" id="fotos">Fotos</button>
         <button class="button button5" id="videos">Vídeos</button>

And here’s the css code and the buttons hmtl.

I know I have to create an id for each button but I don’t know what to write on each one...

And here’s the menu where the buttons I want to move are. inserir a descrição da imagem aqui

html css

  • Which specific side do you change?

  • How would you like to leave them?

  • Not to mention what you want to do will only generate kicks as answers.

1 answer

3


There are several ways to do this, the easiest I believe is with position:absolute. First you put the father and all the "father" elements with 100% height and width to occupy the whole screen, then you put the father of the position:relative and children with position:absolute. That way you can combine the buttons one at each corner with top, left, bottom and right

inserir a descrição da imagem aqui

Follow the image code above:

html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#cssmenu {
width: 100%;
height: 100%;
}
.button {
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 16px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 60px;
  /* margin: 40px 2px; */
  -webkit-transition-duration: 0.4s; /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
  box-sizing: border-box;
}


.button5 {
  background-color: white;
  color: black;
  border: 2px solid #555555;
}

#historia{
  position: absolute;
  top: 0;
  left: 0;
}
#cartazes{
  position: absolute;
  top: 0;
  right: 0;
}
#fotos{
  position: absolute;
  bottom: 0;
  left: 0;

}
#videos{
  position: absolute;
  bottom: 0;
  right: 0;
}


.button5:hover {
  background-color: #555555;
  color: white;
}

ul {
  padding: 0;
  margin: 0;
  position: relative;
  width: 100%;
  height: 100%;
}
<div id="cssmenu">
  <ul>
    <button onclick="location.href='http://localhost/pap/historia.html'" type="button" class="button button5" id="historia">História</button>
    <button class="button button5" id="cartazes">Cartazes</button>
    <button class="button button5" id="fotos">Fotos</button>
    <button class="button button5" id="videos">Vídeos</button>
  </ul>
</div>

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.