Поместить кнопку внутрь блока

[Неугомонный]

Как всегда я % 80 смог сделать а дальше не тащу вообще. В общем как сделать чтобы "Кнопка" была внутри фиолетового контейнера  но не помещая ее в <div class=main></div> ?

https://jsfiddle.net/4Lepbdnr/

Edited July 27, 2019 by Неугомонный

[AlexZaw]

  On 7/27/2019 at 5:31 PM, Неугомонный said:

но не помещая ее в <div class=main></div>

Expand  

<div class="wrap">
  <a class="" href="#">Кнопка</a>
  <div class=main></div>
</div>

a {
  color: #321312;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.wrap {
  position: relative;
  height: 100%;
}

.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2D3142;
  transition: transform .7s ease-in-out;
}

 

[Неугомонный]

  On 7/27/2019 at 5:47 PM, AlexZaw said:

<div class="wrap">
  <a class="" href="#">Кнопка</a>
  <div class=main></div>
</div>

a {
  color: #321312;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

.wrap {
  position: relative;
  height: 100%;
}

.main {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #2D3142;
  transition: transform .7s ease-in-out;
}

 

Expand  

Как я понимаю widht и height 100% можно заменить на right:0; и bottom:0; , получу тот же эффект в совокупности с top: 0; и left:0?

[AlexZaw]

  On 7/27/2019 at 6:25 PM, Неугомонный said:

Как я понимаю widht и height 100% можно заменить на right:0; и bottom:0;

Expand  

Можно, просто мне с width и height  привычнее :)

[Неугомонный]

Поковырялся не та реализация кода..., спасибо за помощь пойду дальше искать от куда черпать базу

Edited July 27, 2019 by Неугомонный

[AlexZaw]

  On 7/27/2019 at 9:14 PM, Неугомонный said:

Поковырялся не та реализация кода.

Expand  

В смысле не та реализация? :)