file upload
This commit is contained in:
764
api/UseCSS/button2.css
Normal file
764
api/UseCSS/button2.css
Normal file
@@ -0,0 +1,764 @@
|
||||
/*
|
||||
會衝突舊版本
|
||||
|
||||
宣告按鈕 button (button_o) [button_l]
|
||||
傳統 (框線) [底線]
|
||||
|
||||
透明 [btn_space_l]
|
||||
白色 btn_white (btn_white_o)
|
||||
藍色 btn_blue (btn_blue_o)
|
||||
天空藍 btn_sky (btn_sky_o) [btn_sky_l]
|
||||
綠色 btn_green (btn_green_o)
|
||||
初音綠 btn_miku (btn_miku_o)
|
||||
墨綠 btn_darkgreen (btn_darkgreen_o)
|
||||
黃色 btn_yellow (btn_yellow_o)
|
||||
紅色 btn_red (btn_red_o)
|
||||
紫色 btn_purple (btn_purple_o)
|
||||
鐵灰色 btn_iron (btn_iron_o)
|
||||
桃紫色 btn_peach (btn_peach_o)
|
||||
橘色 btn_orange (btn_orange_o)
|
||||
粉紅色 btn_pink (btn_pink_o)
|
||||
|
||||
尺寸縮小 btn_s
|
||||
尺寸放大 btn_lg
|
||||
|
||||
範例： <button type="button" class="button btn_blue">按鈕</button>
|
||||
<button type="button" class="button_o btn_blue_o btn_s">按鈕</button>
|
||||
<a href="" class="button btn_miku btn_lg">連結按鈕</a>
|
||||
|
||||
*/
|
||||
|
||||
button {
|
||||
font-family: 'Noto Sans TC',sans-serif;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/*傳統*/
|
||||
.button {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
border-radius: 5px;
|
||||
/*outline: none;*/
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
outline-color: #6192c8;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button:hover::after {
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
/*background-color: rgba(255, 255, 255, 0.1);*/
|
||||
background-image: linear-gradient(to top,rgb(255, 255, 255,0.2) 0%,rgba(255, 255, 255, 0.1) 50%,rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.button:active::after {
|
||||
background-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/*框線*/
|
||||
.button_o {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 3px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button_o:hover::after {
|
||||
content: '';
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
.button_o:active::after {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
/*底線*/
|
||||
.button_l {
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
padding: 5px 10px;
|
||||
outline: none;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.button_l i {
|
||||
color: #0094ff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button_l:hover {
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
.button_l:hover i {
|
||||
color: #0072c4;
|
||||
}
|
||||
}
|
||||
|
||||
a.button_l:link,
|
||||
a.button_l:visited,
|
||||
a.button_l:active {
|
||||
color: initial;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.button_l:hover {
|
||||
color: #ff6a00;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_s {
|
||||
font-size: 12px;
|
||||
padding: 3px 8px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.btn_lg {
|
||||
font-size: 20px;
|
||||
padding: 7px 12px;
|
||||
}
|
||||
|
||||
/*底線專用*/
|
||||
.button_l {
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
/*透明 btn_space*/
|
||||
.btn_space_l {
|
||||
border: 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_space_l:hover {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
/*白色 btn_white*/
|
||||
.btn_white {
|
||||
color: #505050;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.btn_white_o {
|
||||
color: #505050;
|
||||
background-color: #fff;
|
||||
border: 1px solid #d3d3d3;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_white_o:hover {
|
||||
color: #505050;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_white:link,
|
||||
a.btn_white:visited {
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_white:active,
|
||||
a.btn_white:hover {
|
||||
color: #505050;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_white_o:link,
|
||||
a.btn_white_o:visited {
|
||||
color: #505050;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_white_o:hover,
|
||||
a.btn_white_o:active {
|
||||
color: #505050;
|
||||
}
|
||||
}
|
||||
|
||||
/*藍色 btn_blue*/
|
||||
.btn_blue {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
|
||||
.btn_blue_o {
|
||||
color: #337ab7;
|
||||
background-color: #fff;
|
||||
border: 1px solid #337ab7;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_blue_o:hover {
|
||||
color: #fff;
|
||||
background-color: #337ab7;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_blue:link,
|
||||
a.btn_blue:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_blue:active,
|
||||
a.btn_blue:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_blue_o:link,
|
||||
a.btn_blue_o:visited {
|
||||
color: #337ab7;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_blue_o:hover,
|
||||
a.btn_blue_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*天空藍 btn_sky*/
|
||||
.btn_sky {
|
||||
color: #fff;
|
||||
background-color: #3388ff;
|
||||
}
|
||||
|
||||
.btn_sky_o {
|
||||
color: #3388ff;
|
||||
background-color: #fff;
|
||||
border: 1px solid #3388ff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_sky_o:hover {
|
||||
color: #fff;
|
||||
background-color: #3388ff;
|
||||
}
|
||||
}
|
||||
|
||||
.btn_sky_l {
|
||||
border: 0;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
margin: 0 0 1px 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_sky_l:hover {
|
||||
border-bottom: 2px solid #c86e86;
|
||||
margin: 0 0 0 0;
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_sky:link,
|
||||
a.btn_sky:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_sky:active,
|
||||
a.btn_sky:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_sky_o:link,
|
||||
a.btn_sky_o:visited {
|
||||
color: #3388ff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_sky_o:hover,
|
||||
a.btn_sky_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*綠色 btn_green*/
|
||||
.btn_green {
|
||||
color: #fff;
|
||||
background-color: #009149;
|
||||
}
|
||||
|
||||
.btn_green_o {
|
||||
color: #009149;
|
||||
background-color: #fff;
|
||||
border: 1px solid #009149;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_green_o:hover {
|
||||
color: #fff;
|
||||
background-color: #009149;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_green:link,
|
||||
a.btn_green:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_green:active,
|
||||
a.btn_green:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_green_o:link,
|
||||
a.btn_green_o:visited {
|
||||
color: #009149;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_green_o:hover,
|
||||
a.btn_green_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*初音綠 btn_miku*/
|
||||
.btn_miku {
|
||||
color: #fff;
|
||||
background-color: #0098a1;
|
||||
}
|
||||
|
||||
.btn_miku_o {
|
||||
color: #0098a1;
|
||||
background-color: #fff;
|
||||
border: 1px solid #0098a1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_miku_o:hover {
|
||||
color: #fff;
|
||||
background-color: #0098a1;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_miku:link,
|
||||
a.btn_miku:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_miku:active,
|
||||
a.btn_miku:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_miku_o:link,
|
||||
a.btn_miku_o:visited {
|
||||
color: #0098a1;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_miku_o:hover,
|
||||
a.btn_miku_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*墨綠 btn_darkgreen*/
|
||||
.btn_darkgreen {
|
||||
color: #fff;
|
||||
background-color: #2f8966;
|
||||
}
|
||||
|
||||
.btn_darkgreen_o {
|
||||
color: #2f8966;
|
||||
background-color: #fff;
|
||||
border: 1px solid #2f8966;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_darkgreen_o:hover {
|
||||
color: #fff;
|
||||
background-color: #2f8966;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_darkgreen:link,
|
||||
a.btn_darkgreen:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_darkgreen:active,
|
||||
a.btn_darkgreen:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_darkgreen_o:link,
|
||||
a.btn_darkgreen_o:visited {
|
||||
color: #2f8966;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_darkgreen_o:hover,
|
||||
a.btn_darkgreen_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*黃色 btn_yellow*/
|
||||
.btn_yellow {
|
||||
color: #fff;
|
||||
background-color: #f6a800;
|
||||
}
|
||||
|
||||
.btn_yellow_o {
|
||||
color: #f6a800;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f6a800;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_yellow_o:hover {
|
||||
color: #fff;
|
||||
background-color: #f6a800;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_yellow:link,
|
||||
a.btn_yellow:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_yellow:active,
|
||||
a.btn_yellow:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_yellow_o:link,
|
||||
a.btn_yellow_o:visited {
|
||||
color: #f6a800;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_yellow_o:hover,
|
||||
a.btn_yellow_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*紅色 btn_red*/
|
||||
.btn_red {
|
||||
color: #fff;
|
||||
background-color: #e53534;
|
||||
}
|
||||
|
||||
.btn_red_o {
|
||||
color: #e53534;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e53534;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_red_o:hover {
|
||||
color: #fff;
|
||||
background-color: #e53534;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_red:link,
|
||||
a.btn_red:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_red:active,
|
||||
a.btn_red:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_red_o:link,
|
||||
a.btn_red_o:visited {
|
||||
color: #e53534;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_red_o:hover,
|
||||
a.btn_red_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*紫色 btn_purple*/
|
||||
.btn_purple {
|
||||
color: #fff;
|
||||
background-color: #572381;
|
||||
}
|
||||
|
||||
.btn_purple_o {
|
||||
color: #572381;
|
||||
background-color: #fff;
|
||||
border: 1px solid #572381;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_purple_o:hover {
|
||||
color: #fff;
|
||||
background-color: #572381;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_purple:link,
|
||||
a.btn_purple:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_purple:active,
|
||||
a.btn_purple:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_purple_o:link,
|
||||
a.btn_purple_o:visited {
|
||||
color: #572381;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_purple_o:hover,
|
||||
a.btn_purple_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*鐵灰色 btn_iron*/
|
||||
.btn_iron {
|
||||
color: #fff;
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
|
||||
.btn_iron_o {
|
||||
color: #3e3e3e;
|
||||
background-color: #fff;
|
||||
border: 1px solid #3e3e3e;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_iron_o:hover {
|
||||
color: #fff;
|
||||
background-color: #3e3e3e;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_iron:link,
|
||||
a.btn_iron:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_iron:active,
|
||||
a.btn_iron:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_iron_o:link,
|
||||
a.btn_iron_o:visited {
|
||||
color: #3e3e3e;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_iron_o:hover,
|
||||
a.btn_iron_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*桃紅色 btn_peach*/
|
||||
.btn_peach {
|
||||
color: #fff;
|
||||
background-color: #c86e86;
|
||||
}
|
||||
|
||||
.btn_peach_o {
|
||||
color: #c86e86;
|
||||
background-color: #fff;
|
||||
border: 1px solid #c86e86;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_peach_o:hover {
|
||||
color: #fff;
|
||||
background-color: #c86e86;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_peach:link,
|
||||
a.btn_peach:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_peach:active,
|
||||
a.btn_peach:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_peach_o:link,
|
||||
a.btn_peach_o:visited {
|
||||
color: #c86e86;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_peach_o:hover,
|
||||
a.btn_peach_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*橘色 btn_orange*/
|
||||
.btn_orange {
|
||||
color: #fff;
|
||||
background-color: #ec7405;
|
||||
}
|
||||
|
||||
.btn_orange_o {
|
||||
color: #ec7405;
|
||||
background-color: #fff;
|
||||
border: 1px solid #ec7405;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_orange_o:hover {
|
||||
color: #fff;
|
||||
background-color: #ec7405;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_orange:link,
|
||||
a.btn_orange:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_orange:active,
|
||||
a.btn_orange:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_orange_o:link,
|
||||
a.btn_orange_o:visited {
|
||||
color: #ec7405;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_orange_o:hover,
|
||||
a.btn_orange_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
/*粉紅色 btn_pink*/
|
||||
.btn_pink {
|
||||
color: #fff;
|
||||
background-color: #f3a79f;
|
||||
}
|
||||
|
||||
.btn_pink_o {
|
||||
color: #f3a79f;
|
||||
background-color: #fff;
|
||||
border: 1px solid #f3a79f;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.btn_pink_o:hover {
|
||||
color: #fff;
|
||||
background-color: #f3a79f;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_pink:link,
|
||||
a.btn_pink:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_pink:active,
|
||||
a.btn_pink:hover {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
a.btn_pink_o:link,
|
||||
a.btn_pink_o:visited {
|
||||
color: #f3a79f;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
a.btn_pink_o:hover,
|
||||
a.btn_pink_o:active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #505050;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1025px) {
|
||||
.button:disabled:hover::after {
|
||||
background-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
.button_o:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #505050;
|
||||
border: 1px solid #bbb;
|
||||
background-color: #ccc;
|
||||
}
|
||||
|
||||
.button_l:disabled {
|
||||
cursor: not-allowed;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.button_l:disabled i {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.btn_sky_l:disabled {
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
}
|
||||
Reference in New Issue
Block a user