Tạo button tùy chỉnh

Công cụ tạo Css Button tùy chỉnh

Bạn có thể test thử trên trang 4U Editor Html

CSS Code

Top Gradient Color

Middle Gradient Color

Bottom Gradient Color

Border Color

Text Color

Shadow Color

Hover Top Gradient Color

Hover Middle Gradient Color

Hover Bottom Gradient Color

Hover Border Color

Hover Text Color

Kích thước Font,Border,Box-Shadow Nâng cao Nền tốiNền sáng Thay Đổi Class: Code Html

Portable Css Button Generator

Update: 6 March 2012 by © Testtem

OK!

OK!

OK!

OK!

OK!

OK!

OK!

OK!

OK!

OK!

OK!

How to Useclose

Công cụ tạo Css Button :

Hãy khám phá các hiệu ứng trên công cụ này. Click vào nút "CSS Code" để nhận mã CSS. Chèn vào trước thẻ đóng ]]</b:skin>.
Chèn mã HTML bất cứ nơi nào bạn muốn trong bài đăng:

<a class="button" href="#">Button Name</a>

hoặc:

<button class="button">Button Name</button>

hoặc là:

<span class="button">Button Name</span>

cũng có thể dùng:

<input type="button" class="button" value="Button Name" />

Variable Sizeclose

Font Size:

Padding:

Border Width:

Border Radius:

Shadow Offset-X:

Shadow Offset-Y:

Shadow Blur:

Font Family, Border Style and Otherclose

Font Family:	Calibri Arial Helvetica Georgia Times New Roman Comic Sans MS Verdana Monospace Garamond Impact Cooper Black Showcard Gothic Bauhaus 93 Century Gothic Tahoma
Font Weight:	Regular Bold Italic
Border Style:	Solid Double Dashed Dotted Outset Inset Ridge Groove
Box Shadow:	Outset Inset
Text Dimension:	Embossed Letterpress

Letterpress dimensional option will looks good only when combined with the text color that darker than the the button background color.

Gradient Color Stopclose

Default Behaviour Color Stop

Hover Color Stop

Custom Gradient Orientation

Top
Right
Bottom
Left
Custom Orientation

CSS Codeclose

.button {
    cursor:pointer;
    border:1px solid #3f5691;
    background-color:#3059ab;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#2770d6', endColorstr='#3059ab');
    background-image:-webkit-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:-moz-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:-ms-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:-o-linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    background-image:linear-gradient(top, #2770d6 0%, #3161c2 50%, #3059ab 100%);
    padding:20px 40px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
    border-radius:8px;
    -webkit-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
    -moz-box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
    box-shadow:inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #515151;
    text-shadow:0px 1px 0px rgba(0,0,0,0.3);
    color:#ffffff;
    font:normal 16px 'Century Gothic',Helvetica,Arial,Sans-Serif;
    text-decoration:none;
    outline:none;
    vertical-align:middle;
}

.button:hover {
    border-color:#0f2852;
    background-color:#49579c;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#49579c', endColorstr='#142b70');
    background-image:-webkit-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:-moz-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:-ms-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:-o-linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    background-image:linear-gradient(top, #49579c 0%, #1b3880 50%, #142b70 100%);
    color:#ffffff;
}

.button:active {
    background-color:#142b70;
    filter:progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#142b70', endColorstr='#49579c');
    background-image:-webkit-linear-gradient(top, #142b70, #49579c);
    background-image:-moz-linear-gradient(top, #142b70, #49579c);
    background-image:-ms-linear-gradient(top, #142b70, #49579c);
    background-image:-o-linear-gradient(top, #142b70, #49579c);
    background-image:linear-gradient(top, #142b70, #49579c);
}