Use CSS3 to implement buttons with shadow effects and color gradients

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.