Here's how to use the two new properties in CSS3 Box-shadow and transition to implement the buttons with shadows and color gradients as shown below (this is just a picture; I want to embed HTML directly under this page, After trying to find some CSS style does not seem to use can only put pictures ... =_=):
The first is the Box-shados syntax, which is used to add one or more shadows to the box:
H-shadow V-shadow Blur spread color inset;
Value |
Describe |
H-shadow |
Have to. Position of Horizontal Shadow |
V-shadow |
Have to. Position of Vertical Shadow |
Blur |
Optional. Blur Distance |
Spread |
Optional. Shadow Size |
Color |
Optional. The color of the shadow |
Insert |
Optional. Change an outer shadow to an inner shadow |
The following is a CSS style with a 0px,1px blur distance of 5px and a dark gray color for the button set position
1 <style> 2 . Show3 {4 box-shadow: 0px 1px 5px #4a4a4a; 5 }6</style>
then the transition, with four properties to create the transition effect:
Property Duration timing-function delay;
Value |
Describe |
Transition-property |
Specifies the name of the CSS property that sets the transition effect |
Transition-duration |
Specify how many seconds or milliseconds to complete the transition effect |
Transition-timing-function |
Speed curve with specified speed effect |
Transition-delay |
Specify when the transition effect starts |
The following is a style with a transition length of 0.3s and a transition function of ease-out
1 <style> 2 . Show3 {4 transition: . 3s ease-out; 5 }6</style>
Finally, this is the entire implementation code for the button effect at the very beginning:
1 <!DOCTYPE HTML>2 <HTMLLang= "en">3 <Head>4 <MetaCharSet= "UTF-8">5 <title></title>6 7 <style>8 9 . ShowTen { One Border:None; A Display:Inline-block; /*Inline Block*/ - padding:6px 16px; - Color: White; the Background-color:#F88E8B; - text-align:Center; - vertical-align:Middle; - Margin-left:50px; + transition:. 3s ease-out; - cursor:Pointer; /*change pointer style when getting focus*/ + Box-shadow:0px 1px 5px #4a4a4a; A } at p.show a:link,p.show a:visited - { - text-decoration:None; - Color: White; - } - P.show:hover in { - text-decoration:None; to Color: White; + Background-color:#F45551; - } the * </style> $ Panax Notoginseng </Head> - <Body> the + <Div> A <Pclass= "Show"> the <ahref="#">Click here</a> + </P> - </Div> $ $ </Body> - </HTML>
Use CSS3 to implement buttons with shadow effects and color gradients