How to add space between two elements on mouse hover-CodePudding

HTML:

        <div class="main-text">
           <h2>Surface laptop Go</h2>
            <p>Make the most of every day with our largerst surface laptop</p>
            <button>
                   <span> Shop now </span> 
                  <i class="fa fa-angle-right"></i>
            </button> 
        </div>

CSS:

      .main-text button { 
          padding: .8rem 1.5rem;
         border: none;
         background-color: #000;
         color: #fff;
         cursor: pointer; 
       }

       .main-text span:hover{
          border-bottom: 2px #fff solid;
       }

I don't how to how to move the middle space between two elements when mouse hover. Reference: https://www.microsoft.com/ shop now button

CodePudding user response：

.main-text button { 
         width:150px;
         height:50px;
         border: none;
         background-color: #000;
         color: #fff;
         cursor: pointer; 
         transition:0.2s;
       }

       .main-text span:hover{
          border-bottom: 2px #fff solid;
       }

       button:hover span
       {
         padding:0 5px;
         transition:0.2s;
         text-decoration:underline;
       }

<div class="main-text">
      <h2>Surface laptop Go</h2>
       <p>Make the most of every day with our largerst surface laptop</p>
       <button>
              <span>Shop now </span>
              <span><svg style="fill: white;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="8" height="8" class="svg-fg" viewBox="0 0 30 48" style="stroke-width:1px"><path d="M0 4.7C6.4 11.1 12.8 17.5 19.4 24 12.9 30.4 6.5 36.7 0.1 43.1c1.7 1.7 3.3 3.3 4.7 4.7 8-8 16.1-16 24.2-24 -8.1-8-16.1-16-24.2-24C3.4 1.3 1.8 2.9 0 4.7z"></path><path d="M0 4.7c1.8-1.8 3.4-3.4 4.9-4.9 8 8 16.1 16 24.2 24 -8.1 8-16.1 16-24.2 24 -1.5-1.5-3.1-3.1-4.7-4.7C6.5 36.7 12.9 30.4 19.4 24 12.8 17.5 6.4 11.1 0 4.7z"></path></svg></span>
             <i class="fa fa-angle-right"></i>
       </button> 
   </div>

You can use the above code to achieve your expected output.

CodePudding user response：

You can try this code to achieve this.

*{box-sizing: border-box;}
.main-text button { 
          padding: .8rem 1.5rem;
         border: none;
         background-color: #000;
         color: #fff;
  width: 120px;
         cursor: pointer; 
       }

.main-text span{transition: .2s ease all; position: relative; margin-right: 10px; display: inline-block;
border-bottom:2px solid #000;}
.main-text span::after {
  content: '>';
  position: absolute;
  right: -15px;
  transition: .2s ease all;
}
       .main-text span:hover{
         border-color: #fff;
         margin-left: -15px;
       }
.main-text span:hover::after {
  right: -25px;
}

<div class="main-text">
           <h2>Surface laptop Go</h2>
            <p>Make the most of every day with our largerst surface laptop</p>
            <button>
                   <span> Shop now </span>
            </button> 
        </div>