简单的CSS+HTML按钮特效

/ 0评 / 0

使用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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注