Add Drop Shadows to Images and Expand them on Mouse Hover

Add Drop Shadows to Images and Expand them on Mouse Hover

Button

Chèn code sau trước ]]></b:skin>

.button{display:block;float:left;width:60px;height:25px;padding:1px 3px;margin:0 0 0 12px;font-size:1em;color:white;border:1px solid;border-color:#AAA #AAA #888 transparent;-webkit-border-radius:0 2px 2px 0;border-radius:0 2px 2px 0;cursor:pointer;top:-1px;left:-3px;position:relative;background:#CD3232;background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:-moz-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:-o-gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A));background:gradient(linear,left top,left bottom,color-stop(0%,#CD3232),color-stop(100%,#AC2A2A))} .button:hover{background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:-moz-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:-o-gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838));background:gradient(linear,left top,left bottom,color-stop(0%,#5F5F5F),color-stop(100%,#383838))}

Từ giờ mỗi khi muốn button đẹp thì các bạn phải thêm thuộc tính class="button" cho nó. Ví dụ như code select all(mục 14 của bài viết của bác An) là

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/><textarea cols="59" name="MyTextBox" rows="18" wrap="on"style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

Ta phải thêm thuộc tính class="button" sẽ thành

<form name="MyTextBoxForm"><input class="button" name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/><textarea cols="59" name="MyTextBox" rows="18" wrap="on"style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

Kết quả ta sẽ được

NỘI_DUNG_CODE