使用transition做的一个超级超级简单的按钮特效

<div>
    <input type=button value=Login>
    <input type=button value=Reset>
</div>
<style>
    * {
        margin: 0;
        padding: 0;
        background-color: black;
    }

    div {
        width: auto;
        margin: auto;
        padding-top: 200px;
    }

    input {
        display: block;
        width: 200px;
        height: 40px;
        margin: auto;
        outline: none;
        background-color: #74b9ff;
        border: 1px solid #74b9ff;
        color: white;
        font-size: 1.5rem;
        border-radius: 20px;
        transition: all 500ms;
        margin-top: 30px;
    }

    input:hover {
        width: 220px;
        height: 50px;
        border-radius: 30px;
        box-shadow: 0 0 15px #81ecec;
        border: 1px solid #81ecec;
        text-shadow: 5px 2px 10px white;
        background-color: #81ecec;
        transition-delay: 100ms;
        transition-duration: 500ms;
    }
</style>

说点什么
支持Markdown语法
好耶,沙发还空着ヾ(≧▽≦*)o
Loading...