Các kiểu buton-Lưu ý-chèn trên đàu bài viết
http://hocwebchuan.com/reference/generator/box_shadow.php
1. Kiểu gây chú ý nội dung: xem thêm hover đẹp
-nên biết:
-Chú ý tới
-Có thể bạn quan tâm:
-Bài viết liên quan
-Bnaj có biết
-Xem thêm
-Xem tất cả các bài viết liên quan
-Xem series, Toàn bộ series
-Xem chuyên mục
-Để hiểu rõ hơn xem thêm…
Các style:
-nút button download:
<a class=”mybutton1″>Đoạn text muốn hiển thị</a>
<a href=”Link” class=”mybutton1″>text</a>
-Nút gây chú ý kiểu 1 trên:
+Màu xanh: (ko định vị trí)
<style>
mybutton2{
background: #CFFFE4;
border: 2px solid #FFFFFF;
border-radius: 10px 10px 10px 10px;
font-size: 20px;
height: auto;
width: auto;
padding-top: 5px;
padding-left: 8px;
padding-right: 8px;
text-align: center;
color: #3A2AC9;
box-shadow: #BCCCC9 9px 11px 4px -11px;
}
</style>
cú pháp
<mybutton2>fsdfffffffffff</mybutton2>
————————————
-Màu xanh định vị tri: bên phải DEMO
<style>
mybutton2{
background: #CFFFE4;
border: 2px solid #FFFFFF;
border-radius: 10px 10px 10px 10px;
font-size: 20px;
height: auto;
width: auto;
padding-top: 5px;
padding-left: 8px;
padding-right: 8px;
box-shadow: #BCCCC9 9px 11px 4px -11px;
text-align: center;
color: #3A2AC9;
}
</style>
<style>
vitritoptrai { position: absolute; top: 10px;right: 5px; text-align: center;}
</style>
<vitritoptrai>
<mybutton2>tex1</abc><br />
<mybutton2>fsdfffffffffff</mybutton2><br />
<mybutton2>fsdfffffffffff</mybutton2><br />
<mybutton2>fsdfffffffffff</mybutton2><br />
<mybutton2>fsdfffffffffff</mybutton2><br />
<mybutton2>Anh đay em ở đau cho anh gặp tý></mybutton2>
</vitritoptrai>
———————–
bảng siêu ngon:
<a class=”mybutton1″>Đoạn text muốn hiển thị</a>
———————————————————-
<br />
<div class=”CSSTableGenerator”>
<table>
<tbody>
<tr>
<td><a class=”mybutton1″>Đề và đáp án HSG quốc gia hóa học tất cả các năm, đề thi của bộ</a></td>
<td><a class=”mybutton1″>Đề thi thử, đề thi dự bị, đề thi chọn đội tuyển HSG quốc gia của các trường chuyên trên cả nước</a></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 1997</mybutton2></td>
<td><mybutton2></mybutton2></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 1998</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 1999</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2000</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2001</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2002</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2003</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2004</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2005</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2006</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2007</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2008</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2009</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2010</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2011</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2012</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2013</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2014</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2015</mybutton2></td>
<td></td>
</tr>
<tr>
<td><mybutton2>HSG quốc gia môn hóa học 2016-updating</mybutton2></td>
<td></td>
</tr>
</tbody></table>
</div>
<br />
———————————————————-
<style>
mybutton2{
background: #CFFFE4;
border: 2px solid #FFFFFF;
border-radius: 10px 10px 10px 10px;
font-size: 20px;
height: auto;
width: auto;
padding-top: 5px;
padding-left: 8px;
padding-right: 8px;
box-shadow: #BCCCC9 9px 11px 4px -11px;
text-align: center;
color: #3A2AC9;
line-height: 1.6;
}
</style>
<style>
.CSSTableGenerator {
margin:0px;padding:0px;
width:100%;
box-shadow: 10px 10px 5px #888888;
border:1px solid #fcfcfc;
-moz-border-radius-bottomleft:13px;
-webkit-border-bottom-left-radius:13px;
border-bottom-left-radius:13px;
-moz-border-radius-bottomright:13px;
-webkit-border-bottom-right-radius:13px;
border-bottom-right-radius:13px;
-moz-border-radius-topright:13px;
-webkit-border-top-right-radius:13px;
border-top-right-radius:13px;
-moz-border-radius-topleft:13px;
-webkit-border-top-left-radius:13px;
border-top-left-radius:13px;
}.CSSTableGenerator table{
border-collapse: collapse;
border-spacing: 0;
width:100%;
height:100%;
margin:0px;padding:0px;
}.CSSTableGenerator tr:last-child td:last-child {
-moz-border-radius-bottomright:13px;
-webkit-border-bottom-right-radius:13px;
border-bottom-right-radius:13px;
}
.CSSTableGenerator table tr:first-child td:first-child {
-moz-border-radius-topleft:13px;
-webkit-border-top-left-radius:13px;
border-top-left-radius:13px;
}
.CSSTableGenerator table tr:first-child td:last-child {
-moz-border-radius-topright:13px;
-webkit-border-top-right-radius:13px;
border-top-right-radius:13px;
}.CSSTableGenerator tr:last-child td:first-child{
-moz-border-radius-bottomleft:13px;
-webkit-border-bottom-left-radius:13px;
border-bottom-left-radius:13px;
}.CSSTableGenerator tr:hover td{
}
.CSSTableGenerator tr:nth-child(odd){ background-color:#fcfcfc; }
.CSSTableGenerator tr:nth-child(even) { background-color:#ffffff; }.CSSTableGenerator td{
vertical-align:middle;
border:1px solid #fcfcfc;
border-width:0px 1px 1px 0px;
text-align:center;
padding:14px;
font-size:16px;
font-family:Arial;
font-weight:bold;
color:#061389;
}.CSSTableGenerator tr:last-child td{
border-width:0px 1px 0px 0px;
}.CSSTableGenerator tr td:last-child{
border-width:0px 0px 1px 0px;
}.CSSTableGenerator tr:last-child td:last-child{
border-width:0px 0px 0px 0px;
}
.CSSTableGenerator tr:first-child td{
background:-o-linear-gradient(bottom, #fcfcfc 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fcfcfc), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #fcfcfc 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#fcfcfc”, endColorstr=”#ffffff”); background: -o-linear-gradient(top,#fcfcfc,ffffff);
background-color:#fcfcfc;
border:0px solid #fcfcfc;
text-align:center;
border-width:0px 0px 1px 1px;
font-size:18px;
font-family:Arial;
font-weight:bold;
color:#0a2e99;
}
.CSSTableGenerator tr:first-child:hover td{
background:-o-linear-gradient(bottom, #fcfcfc 5%, #ffffff 100%); background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #fcfcfc), color-stop(1, #ffffff) );
background:-moz-linear-gradient( center top, #fcfcfc 5%, #ffffff 100% );
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=”#fcfcfc”, endColorstr=”#ffffff”); background: -o-linear-gradient(top,#fcfcfc,ffffff);
background-color:#fcfcfc;
}
.CSSTableGenerator tr:first-child td:first-child{
border-width:0px 0px 1px 0px;
}
.CSSTableGenerator tr:first-child td:last-child{
border-width:0px 0px 1px 1px;
}
</style>