Home > Developer > Web Develop
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
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
