如何创建一个流畅的动画流动按钮？答案

【问题标题】：How to create a smooth animated flowing button?如何创建一个流畅的动画流动按钮？
【发布时间】：2017-10-05 05:52:27
【问题描述】：

我打算将我网站中的所有input[type=submit]s 和buttons 更改为这个流畅的动画流动按钮。

那么，如何使用 HTML、JavaScript 和 CSS 创建它？特别是我制作了这个 GIF 以将其发布到 Stack Overflow。而且我不认为，我必须在这个问题中发布一些代码来解释它。：/

编辑：我不想要从右下角到左上角的完全卷曲效果。它应该从我点击的区域开始影响。在下一个 GIF 中，我点击了中间。现在请看效果。

我希望你能明白我的意思。 它应该从我点击的确切区域开始向外流动。

【问题讨论】：

你想要完全从右下角到左上角的卷发效果？

标签： javascript html css button

【解决方案1】：

您可以在其中使用 hover.css、Checkout 背景过渡 http://ianlunn.github.io/Hover/ 。如果你想要和你发布的完全一样。你总是可以用 hover.css 尝试一些试验和错误

【讨论】：

【解决方案2】：

您可以使用简单的 css 轻松制作，请参阅 click

【讨论】：

【解决方案3】：

希望这会有所帮助！

.button {
    position: relative;
    background-color: #4CAF50;
    border: none;
    font-size: 28px;
    color: #FFFFFF;
    padding: 20px;
    width: 200px;
    text-align: center;
    -webkit-transition-duration: 0.4s; /* Safari */
    transition-duration: 0.4s;
    overflow: hidden;
}

.button:after {
    content: "";
    background: #90EE90;
    display: block;
    position: absolute;
    padding-top: 300%;
    padding-left: 350%;
    margin-left: -20px!important;
    margin-top: -120%;
    opacity: 0;
    transition: all 0.8s
}

.button:active:after {
    padding: 0;
    margin: 0;
    opacity: 1;
    transition: 0s
}

&lt;button class="button"&gt;Click Me&lt;/button&gt;

【讨论】：

【解决方案4】：

请检查一下，希望对您有所帮助。

a {
padding: 20px 30px;
line-height:30px;
color:#fff;
font-size: 20px;
background:#ff0000;
text-decoration: none;
position: relative;
transition: all ease .6s;
overflow:hidden;
display: inline-block;
}

a span {
z-index:1;
position:relative;
}
a:after {
transform: scale(0);
background: #000;
position: absolute;
right:-200px;
bottom:-200px;
content:'';
border-radius: 100%;
transition: all ease .6s;
width: 400px;
height: 400px;
}

a:hover:after {
  transform:scale(1);
  transition: all ease .6s;
}

&lt;a href="#"&gt;&lt;span&gt;Test&lt;/span&gt;&lt;/a&gt;

【讨论】：

【解决方案5】：

可以通过this question的“Abhitalks”回答中的小调整来实现！

在 html 中：

<div class="outer_box" id="btn">
    <span>Button text</span>
    <div id="dummy"></div>
</div>

css：

 .outer_box{
    background-color: transparent;
    width: 400px;
    height: 400px;
    position: relative;
    border: 1px solid silver;
    text-align:center;
   }

#dummy { 
    position: absolute;
    top: 400px; left: 400px;
    width: 1px; height: 1px;
    background-color: gray;
    z-index: -5;
}

脚本：

$('#btn').on("click", function() {
    $('#dummy').animate({
        'width': '400px',
        'height': '400px',
        'top': '0px',
        'left': '0px'
    }, 500);    
    //and any action to be done on click :)
});

【讨论】：