Tạo nút cực đẹp với css 3


<style>
    a.css-button {
        font-size:30px;
        color:#000;
        text-decoration:none;
        display:block;
        width:478px;
        padding:10px;
        border:1px solid #DDD;
        text-align:center;

        -moz-border-radius:5px;
        -webkit-border-radius:5px;
        -o-border-radius:5px;
        border-radius:5px;

        background:#FFFFFF;
        background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#EEE));
        background:-moz-linear-gradient(0% 90% 90deg, #EEE, #FFF);

        -webkit-transition: all .4s ease-in-out;
        -moz-transition: all .4s ease-in-out;
        -o-transition: all .4s ease-in-out;
        transition: all .4s ease-in-out;
    }
    a.css-button:hover {
        color:#fff;
        border-color:#3278BE;

        background:#4195DD;
        background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4195DD), to(#003C82));
        background:-moz-linear-gradient(0% 90% 90deg, #003C82, #4195DD);
    }
    a.css-button:active {
        background:#4195DD;
        background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#003C82), to(#4195DD));
        background:-moz-linear-gradient(0% 90% 90deg, #4195DD, #003C82);
    }

    a.css-button.notransitions {
        -webkit-transition: none;
        -moz-transition: none;
        -o-transition: none;
        transition: none;
    }
</style>

<p><a href="" class="css-button">Try</a></p>
<p><a href="" class="css-button notransitions">Try</a></p>

Các bạn chạy và xem demo thử nhé!

Advertisements

Để lại comment đê!

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s