• <i id='TGhWF'><tr id='TGhWF'><dt id='TGhWF'><q id='TGhWF'><span id='TGhWF'><b id='TGhWF'><form id='TGhWF'><ins id='TGhWF'></ins><ul id='TGhWF'></ul><sub id='TGhWF'></sub></form><legend id='TGhWF'></legend><bdo id='TGhWF'><pre id='TGhWF'><center id='TGhWF'></center></pre></bdo></b><th id='TGhWF'></th></span></q></dt></tr></i><div id='TGhWF'><tfoot id='TGhWF'></tfoot><dl id='TGhWF'><fieldset id='TGhWF'></fieldset></dl></div>
  • <small id='TGhWF'></small><noframes id='TGhWF'>

        <bdo id='TGhWF'></bdo><ul id='TGhWF'></ul>
    1. <legend id='TGhWF'><style id='TGhWF'><dir id='TGhWF'><q id='TGhWF'></q></dir></style></legend>
      1. <tfoot id='TGhWF'></tfoot>
      2. 悬停时用倾斜背景填充元素

        时间:2023-11-29
            <tbody id='WpMp6'></tbody>
          <i id='WpMp6'><tr id='WpMp6'><dt id='WpMp6'><q id='WpMp6'><span id='WpMp6'><b id='WpMp6'><form id='WpMp6'><ins id='WpMp6'></ins><ul id='WpMp6'></ul><sub id='WpMp6'></sub></form><legend id='WpMp6'></legend><bdo id='WpMp6'><pre id='WpMp6'><center id='WpMp6'></center></pre></bdo></b><th id='WpMp6'></th></span></q></dt></tr></i><div id='WpMp6'><tfoot id='WpMp6'></tfoot><dl id='WpMp6'><fieldset id='WpMp6'></fieldset></dl></div>

          • <bdo id='WpMp6'></bdo><ul id='WpMp6'></ul>
              • <legend id='WpMp6'><style id='WpMp6'><dir id='WpMp6'><q id='WpMp6'></q></dir></style></legend>

                  <small id='WpMp6'></small><noframes id='WpMp6'>

                1. <tfoot id='WpMp6'></tfoot>
                  本文介绍了悬停时用倾斜背景填充元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着跟版网的小编来一起学习吧!

                  问题描述

                  I'm trying to create an CSS button hover effect. But I didn't manage to fill the element with a slanted shape.

                  How the hover effect was planned:

                  Screenshot 1: How it looks actually.

                  Screenshot 2: How I want the hover effect to look like with slanted side.

                  .button_sliding_bg {
                    color: #31302B;
                    background: #FFF;
                    padding: 12px 17px;
                    margin: 25px;
                    font-family: 'OpenSansBold', sans-serif;
                    border: 3px solid #31302B;
                    font-size: 14px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    border-radius: 2px;
                    display: inline-block;
                    text-align: center;
                    cursor: pointer;
                    box-shadow: inset 0 0 0 0 #31302B;
                    -webkit-transition: all ease 0.8s;
                    -moz-transition: all ease 0.8s;
                    transition: all ease 0.8s;
                  }
                  .button_sliding_bg:hover {
                    box-shadow: inset 200px 0 0 0 #31302B;
                    color: #FFF;
                  }

                  <button class="button_sliding_bg">Buttontext</button>

                  解决方案

                  I believe that you are actually looking for the end state to fill the entire element with background color and not leave the gap. You could also do it with linear-gradient background images and transition their background-size and background-position like in the below snippet.

                  One disadvantage of using linear-gradient over pseudo-elements or transforms is that the browser support is lower but it doesn't need extra pseudo-elements and so can leave them spare for other use.

                  .button_sliding_bg {
                    color: #31302B;
                    background: #FFF;
                    padding: 12px 17px;
                    margin: 25px;
                    font-family: 'OpenSansBold', sans-serif;
                    border: 3px solid #31302B;
                    font-size: 14px;
                    font-weight: bold;
                    letter-spacing: 1px;
                    text-transform: uppercase;
                    border-radius: 2px;
                    display: inline-block;
                    text-align: center;
                    cursor: pointer;
                    background-image: linear-gradient(135deg, #31302B 50%, transparent 51%);
                    background-size: 100px 100px; /* some initial size to get the slanted appearance */
                    background-position: -50px -50px; /* negative positioning to hide it initially */
                    background-repeat: no-repeat;
                    transition: all ease 0.8s;
                  }
                  .button_sliding_bg:hover {
                    background-size: 200% 200%; /* 200% because gradient is colored only for 50% */
                    background-position: 0px 0px; /* bring it fully into view */
                    color: #FFF;
                  }

                  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
                  <button class="button_sliding_bg">Buttontext</button>
                  <button class="button_sliding_bg">Button text lengthy</button>
                  <button class="button_sliding_bg">Button text <br> with line break</button>
                  <button class="button_sliding_bg">Button text <br> with <br> multiple <br> line <br>breaks</button>

                  这篇关于悬停时用倾斜背景填充元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持跟版网!

                  上一篇:链接悬停导致 background-size: cover;在 Chrome 中切换 下一篇:带有 CSS3 和 javascript z 轴问题的缩略图悬停缩放(放大)

                  相关文章

                    <bdo id='s4uNU'></bdo><ul id='s4uNU'></ul>
                  1. <i id='s4uNU'><tr id='s4uNU'><dt id='s4uNU'><q id='s4uNU'><span id='s4uNU'><b id='s4uNU'><form id='s4uNU'><ins id='s4uNU'></ins><ul id='s4uNU'></ul><sub id='s4uNU'></sub></form><legend id='s4uNU'></legend><bdo id='s4uNU'><pre id='s4uNU'><center id='s4uNU'></center></pre></bdo></b><th id='s4uNU'></th></span></q></dt></tr></i><div id='s4uNU'><tfoot id='s4uNU'></tfoot><dl id='s4uNU'><fieldset id='s4uNU'></fieldset></dl></div>
                  2. <small id='s4uNU'></small><noframes id='s4uNU'>

                    <tfoot id='s4uNU'></tfoot>

                      <legend id='s4uNU'><style id='s4uNU'><dir id='s4uNU'><q id='s4uNU'></q></dir></style></legend>