html - CSS transition to turn corner triangle into rectangle panel -


i want create corner in panel take on whole surface of panel when hovered.

so far have : https://jsfiddle.net/nk8wc5lx/

html

<div class="col-md-4 mb-4">            <div class="panel panel-default1">              <div class="panel-body">                  <div class='amg-corner-button_wrap'>                 <div class='amg-corner-button'></div>                 <span class='amg-corner-button_text'>text goes here</span>                 </div>              </div> <!-- panel body -->            </div> <!-- panel default -->  </div> <!-- col md 4 --> 

css

.panel-default1 {   padding-top: 10px;   border-radius: 20px;   box-shadow: 0 0 10px rgba(0, 0, 0, 0.10);   height: 400px;   width: 100%;   overflow: hidden;   margin: 0 auto;   position: relative; } .amg-corner-button_wrap {   display: block;   position: absolute;   bottom: 0;   right: 0;   width: 40px;   height: 40px; }  .amg-corner-button_wrap:hover {   width: 100%;   height: 100%; }  .amg-corner-button_wrap:hover div {   width: 100%;   height: 100%; }  .amg-corner-button {   display: block;   position: absolute;   bottom: 0;   right: 0;   width: 40px;   height: 40px;   background-color: #46982b;   transition: width,height;   transition-duration: 0.4s; }  .amg-corner-button:before {   content: "";   position: absolute;   top: 0;   right: 0;   border-width: 0 0 120px 120px;   border-style: solid;   border-color: #46982b #fff;   }  .amg-corner-button:hover::before {   border-width: 0; }  .amg-corner-button_text {   font-size: 14px;   font-size: 1.4rem;   width: 120px;   position: absolute;   top: 60px;   right: 0;   left: 0;   text-align: center;   color: #ffffff; } 

the problem have transition not smooth @ all, , turns triangle rectangle shape instantly when hovered. triangle shape spread out triangle shape, , not rectangle. here example illustration idea : https://codepen.io/mrexpert/pen/bqmovy

please advise better css transition.


Comments

Popular posts from this blog

resizing Telegram inline keyboard -

command line - How can a Python program background itself? -

php - "cURL error 28: Resolving timed out" on Wordpress on Azure App Service on Linux -