Развертывание кнопкипри наведении мыши - пример html js css

• HTML код


• CSS код
• Результат кода

<div class="box">

  <div class="box-icon"><svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><path d="M18 3a3 3 0 0 0-3 3v12a3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3H6a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3V6a3 3 0 0 0-3-3 3 3 0 0 0-3 3 3 3 0 0 0 3 3h12a3 3 0 0 0 3-3 3 3 0 0 0-3-3z"></path></svg></div>

  <div class="box-label">MASTERCLASS</div>

  <div class="box-title">Placid.app Editor Basics ✨</div>

  <div class="box-image">

    <img src="https://source.unsplash.com/600x600" alt="">

  </div>

  <div class="studio-button">

    <div class="studio-button-icon">

      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle></svg>

    </div>

    <div class="studio-button-label">

      Open in Studio

    </div>

  </div>

</div>

body {

  background: #111;

  display: grid;

  place-items: center;

  min-height: 98vh;

}



.box {

  background: white;

  border-radius: 20px;

  display: grid;

  grid-template-columns: 64px 1fr;

  position: relative;

}



.box-icon {

  display: grid;

  place-items: center;

}



.box-label {

  height: 64px;

  display: flex;

  align-items: center;

  padding-left: 16px;

  font-size: 14px;

  letter-spacing: 0.125em;

}



.box-title {

  white-space: nowrap;

  display: flex;

  align-items: center;

  -ms-writing-mode: tb-rl;

      writing-mode: vertical-rl;

  -webkit-text-orientation: mixed;

          text-orientation: mixed;

  font-size: 24px;

  padding-top: 16px;

}



.box-image {

  width: 400px;

  height: 400px;

  border-radius: 18px 0 18px 0;

  overflow: hidden;

}

.box-image img {

  width: 100%;

  display: block;

}



.studio-button {

  position: absolute;

  bottom: 16px;

  right: 16px;

  display: flex;

  align-items: center;

  background: #68009d;

  color: white;

  padding: 8px 10px;

  border-radius: 50px;

  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);

  transition: 0.35s ease all;

  overflow: hidden;

  max-width: 22px;

  /* icon size */

}



.studio-button-icon {

  position: relative;

  top: 1px;

}



.studio-button-label {

  text-transform: uppercase;

  white-space: nowrap;

  padding: 0 8px;

  opacity: 0;

  transform: translateX(10px);

  transition: 0.25s ease all;

}



.box:hover .studio-button {

  max-width: 100%;

}

.box:hover .studio-button-label {

  opacity: 1;

  transform: translateX(0);

  transition: 0.25s 0.1s ease-in opacity, 0.15s 0.1s cubic-bezier(0.175, 0.885, 0.32, 1.275) transform;

}