skip to Main Content

The button in red with the text inside Button on the top right is a button I can drag from the wix editor it’s a built-in button so there is no problem to drag it around and position it.

but then I created my own button, and I can’t drag it around to the top right. and it’s always a problem and a bit complicated to find the right position because I don’t want it on the top right corner but like the red Button close to the top right corner.

This is the code of the button:

<div class="btn">
  <div class="part1"></div>
  <div class="part2"></div>
</div>
  
  <style>body, html {
  margin: 0;
  background-color: #3498db;
}
.btn {
  width: 64px;
  height: 64px;
  background-color: #e74c3c;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -32px;
  margin-left: -32px;
  box-shadow: 0 0 0 2px #fff;
  cursor: pointer;
  transition: all .2s ease-out;
}
.btn:active {
  background-color: #c0392b;
}
.part1, .part2 {
  width: 32px;
  height: 32px;
  background-image: url(https://cdn0.iconfinder.com/data/icons/feather/96/591275-arrow-up-64.png);
  background-size: 32px;
  float: left;
  transition: all .2s ease-out;
}
.part1 {
  transform: rotate(-135deg);
  position: relative;
  top: 32px
}
.part2 {
  transform: rotate(45deg);
}
.btn.fullscreen {
  transform: scale(1.1);
}
.btn.fullscreen .part1 {
  transform: rotate(45deg);
}
.btn.fullscreen .part2 {
  transform: rotate(225deg);
}</style>
  
  <script>document.querySelector('.btn').onclick = function () {
  this.classList.toggle('fullscreen');
}</script>

The result is the draggable button from wix on the top right and my button is more or less in the center and I want to position my button where the wix button is.

buttons

2

Answers


  1. you can try to use the top and right of .btn css property to control the btn position relative the body

    Login or Signup to reply.
  2. Your button is already absolute, just change the fullscreen styles to below:

    .btn.fullscreen {
      transform: scale(1.1);
      top: 9.5%;
      left: 97.5%;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search