Html Question posted in
Some basic documentation can be found here.

Html – CSS – Transformations

HTML

<div class="buttonFrame"><div class="btn"></div></div>

CSS

.buttonFrame {
        position: relative;
        width: 55px;
        height: 20px;
        border-radius: 12px;
        border: 2px solid black;
        overflow: hidden;
        top: 30%;
        left: 45%;
        z-index: 100px;
      }
      .btn {
        border-radius: 12px;
        width: 0%;
        height: 0%;
        background: linear-gradient(
          90deg,
          rgba(2, 0, 36, 1) 0%,
          rgba(9, 9, 121, 1) 35%,
          rgba(6, 78, 166, 1) 57%,
          rgba(3, 134, 203, 1) 75%,
          rgba(2, 156, 218, 1) 82%,
          rgba(0, 212, 255, 1) 100%
        );
        background-position: 0 0;
        transition: width 2s, height 2s; /* Added height transition */
      }

      .buttonFrame:hover .btn {
        /* Changed to target .btn on hover of .buttonFrame */
        width: 100%; /* Adjusted width for hover effect */
        height: 100%; /* Adjusted height for hover effect */
        background-position: 0 0;
        /* transform: scaleX(2); */
      }

Transition effect is starting from TOP-LEFT corer but need it to start from left corner

I have tried a couple of ways from the internet and AI but nothinga working. basically i am trying to make it like a small loading bar which loads when i hover over the block.

Tags:

2

Answers


  1. 0

    As A Haworth mentioned in comment, setting the height only on hover and in the transition will make it change from 0 to 100%. You can remove it and add the height to the button.

    Also, the z-index has no unit of measurement, it shoudl be z-index:100;

    Keeping your code :

    .buttonFrame {
  position: relative;
  width: 55px;
  height: 20px;
  border-radius: 12px;
  border: 2px solid black;
  overflow: hidden;
  top: 30%;
  left: 45%;
  /* z-index: 100px; */
  z-index: 100;
}

.btn {
  border-radius: 12px;
  width: 0%;
  height: 0%;
  background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%);
  background-position: 0 0;
  /* transition: width 2s, height 2s; */
  transition: width 2s;
  height: 100%;
}

.buttonFrame:hover .btn {
  width: 100%;
  /* height: 100%; */
  background-position: 0 0;
}
    <div class="buttonFrame">
  <div class="btn"></div>
</div>

    Note that you can make it with one element using after. Here is a snippet only with the needed properties.

    .btn {
  width: 55px;
  height: 20px;
  border: 2px solid black;
  overflow: hidden;
}

.btn,
.btn:after {
  border-radius: 12px;
}

.btn:after {
  display: block;
  content: "";
  width: 0%;
  transition: width 2s;
  height: 100%;
  background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%);
}

.btn:hover:after {
  width: 100%;
}
    <div class="btn"></div>
    Login or Signup to reply.
  2. 0

    background-size is animatable so there is no need to insert an otherwise spurious element into the HTML.

    This snippet has one div which has a background initially with 0 width and that gets transitioned to 100% on hover.

    .button {
  position: relative;
  width: 55px;
  height: 20px;
  border-radius: 12px;
  border: 2px solid black;
  overflow: hidden;
  top: 30%;
  left: 45%;
  z-index: 100;
  background: linear-gradient( 90deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 1) 35%, rgba(6, 78, 166, 1) 57%, rgba(3, 134, 203, 1) 75%, rgba(2, 156, 218, 1) 82%, rgba(0, 212, 255, 1) 100%);
  transition: background-size 2s;
  background-size: 0% 100%;
  background-position: 0 50%;
  background-repeat: no-repeat;
}

.button:hover {
  background-size: 100% 100%;
  /* transform: scaleX(2); */
}
    <div class="button"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search