Problem that 'pseudo-class:active' applied to buttons also applies to other layout element-CodePudding

I'm making a portfolio page with html/css at the basic level I made a button with an animation effect using pseudo-class: active. Below is my html, css code.

div,
input,
textarea {
  box-sizing: border-box;
}

body {
  margin: 0;
}

html {
  line-height: 1.15;
}

* {
  margin: 0;
  padding: 0;
}

.main-bg {
  background: rgb(2, 0, 36);
  background: linear-gradient(180deg, rgba(2, 0, 36, 1) 0%, rgba(172, 224, 255, 1) 0%, rgba(106, 166, 241, 1) 0%, rgba(73, 73, 182, 1) 100%);
  width: 100%;
  height: 1000px;
}

.main-introduction {
  color: white;
  width: 40%;
  padding: 10px;
  position: relative;
  left: 100px;
  top: 100px;
}

.main-introduction>h1,
p {
  margin-bottom: 10px;
}

.showBtn {
  /* margin-top: 10px; */
  width: 110px;
  padding: 15px;
  border-radius: 15px;
  background: rgb(98, 98, 98);
  color: white;
  border: none;
  box-shadow: 3px 3px 3px black;
  transition-duration: 0.3s;
  cursor: pointer;
}

.showBtn:active {
  margin-left: 5px;
  margin-top: 5px;
  box-shadow: none;
}

.phone {
  width: 30%;
  position: relative;
  left: 1000px;
  top: 2px;
}

.white-banner {
  background: white;
  text-align: center;
  padding: 20px;
  height: 200px;
}

.white-banner>h4,
p {
  margin-bottom: 20px;
}

```

<body>
  <div >
    <div >
      <h1>Frontend Student Developer, <span style="font-size: larger; color: rgb(165, 255, 252);">Dan</span></h1>

      <br>

      <p>Always considering improvements, growing, code.</p>
      <p>Recently fell in love with developing.</p>

      <button >Show More</button>
    </div>

    <div>
      <img src="img/phone.png" alt="phone" >
    </div>

    <div >
      <h4>god tell us the reason youth is wasted on the young</h4>
      <p>Lorem ipsum dolor sit amet consectetur elit.</p>
      <button  style="width: 150px;">Show Portfolio</button>
    </div>
  </div>
</body>

When I cliked a button, as you saw, animation effect is happen by giving margin when I clicked(:active) btn. But Phone image and white-banner also got animation effect!!

I thought about margin collapse. However, it was judged that it was not because the upper and lower borders were not overlapped. Also I tried giving some additional margin. (Annotated code on .showBtn) But.. It didn't work, but rather the shadow effect turned strange. I also want to know why shadow effect turned strangely. I don't know why this happened..

CodePudding user response：

Maybe you need to make your introduce position to fixed. The margin move it.

CodePudding user response：

Problem : your 'html structure objects' interact with each others.
You can solve it too much ways with using css.

But you have to know this : 'The right way is only a few.'
This way is better for you : 'Learn more about CSS.'

For example :

Option 1 : Seperate your main objects divs and give they are some height and width.
Place they are right and left side.

// But you will have to give they are responsive behaviors.
// You will need some css experience.

Option 2 : Make your hero image 'absolute' not 'block'.

// And you will need for place it 'very well' some css knowledge like flex.
// learn 'flex'.

Option 3 : You can use your image like a background-image for your div.

// and make it contain, re-size and place it with some responsive behaviors.
// it will be never interaction with other html elements.

Option 4 : Use grids for seperate your html objects for not-interact with each others.

// learn grids.

// =============== best way. =============== //

if you don't want to save only today...

Examine other's similar html/css code examples.
Find similars but responsive ones.

// =============== best way. =============== //