Several CSS button styles
Last Update:2018-12-07
Source: Internet
Author: User
Several CSS button styles
<Style> <br/>. BTN {<br/> border-Right: # 7b9ebd 1px solid; padding-Right: 2px; border-top: <br/># 7b9ebd 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = # cecfde); border-left: # 7b9ebd <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: # 7b9ebd 1px solid <br/>}< br/>. btn1_mouseout {<br/> border-Right: # 7ebf4f 1px solid; padding-Right: 2px; border-top: <br/> # 7ebf4f 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = # b3d997); border-left: # 7ebf4f <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: # 7ebf4f 1px solid <br/>}< br/>. btn1_mouseover {<br/> border-Right: # 7ebf4f 1px solid; padding-Right: 2px; border-top: <br/> # 7ebf4f 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = # cae4b6); border-left: # 7ebf4f <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: # 7ebf4f 1px solid <br/>}< br/>. btn2 {padding: 2 4 0 <br/> 4; font-size: 12px; Height: 23; Background-color: # ece9d8; border-width: 1 ;} <br/>. btn3_mouseout {<br/> border-Right: # 2c59aa 1px solid; padding-Right: 2px; border-top: <br/> # 2c59aa 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = # c3daf5); border-left: # 2c59aa <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: # 2c59aa 1px solid <br/>}< br/>. btn3_mouseover {<br/> border-Right: # 2c59aa 1px solid; padding-Right: 2px; border-top: <br/> # 2c59aa 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = # d7e7fa); border-left: # 2c59aa <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: # 2c59aa 1px solid <br/>}< br/>. btn3_mousedown <br/>{< br/> border-Right: # ffe400 1px solid; padding-Right: 2px; border-top: <br/># ffe400 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = # c3daf5); border-left: # ffe400 <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: # ffe400 1px solid <br/>}< br/>. btn3_mouseup {<br/> border-Right: # 2c59aa 1px solid; padding-Right: 2px; border-top: <br/> # 2c59aa 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = # c3daf5); border-left: # 2c59aa <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: # 2c59aa 1px solid <br/>}< br/>. btn_2k3 {<br/> border-Right: #002d96 1px solid; padding-Right: 2px; border-top: <br/># 002d96 1px solid; padding-left: 2px; font-size: 12px; filter: <br/> progid: DXImageTransform. microsoft. gradient (gradienttype = 0, <br/> startcolorstr = # ffffff, endcolorstr = #9 dbcea); border-left: #002d96 <br/> 1px solid; cursor: hand; color: black; padding-top: 2px; <br/> border-bottom: #002d96 1px solid <br/>}< br/> </style> <br/> <body> <br/> <button class = BTN> button </button> <p> </P> <br/> <button <br/> class = btn1_mouseout onmouseover = "this. classname = 'btn1 _ Mouseover '"<br/> onmouseout =" this. classname = 'n1 _ mouseout' "<br/> button </button> <br/> <button <br/> class = btn1_mouseout onmouseover =" this. classname = 'btn1 _ Mouseover '"<br/> onmouseout =" this. classname = 'n1 _ mouseout' "disabled <br/> button </button> <br/> <p> <br/> <button class = btn2> button </button> <br/> <p> <br/> <button class = btn3_mouseout <br/> onmouseover = "this. classname = 'btn3 _ mouseover' "<br/> onmouseout =" this. classname = 'btn3 _ mouseout' "<br/> onmousedown =" this. classname = 'btn3 _ mousedown '"<br/> onmouseup =" this. classname = 'btn3 _ mouseup' "onclick =" this. blur (); "<br/> button </button> <br/> <p> <br/> <button class = btn_2k3> 2K3 button </button> <br/> </ body> <br/>
[Ctrl + A select all prompt: you can modify the part firstCode, And then press run]