How to make a good-looking button with CSS3?

This article mainly introduces the use of CSS3 to make the style good-looking button, that is, rounded corners Click the Right slide button function. I hope this article will be helpful for you to introduce.

Note: CSS3,CSS is used to control the style and layout of Web pages. CSS3 is the latest CSS standard.

The specific code example for making a nice-looking button with CSS3 is as follows:

<div class= "container fix" > 
 
 

/*style2.css*/.a-btn{background: #80a9da;    Background:-webkit-gradient (Linear,left top,left bottom,color-stop (#80a9da, 0), Color-stop (#6f97c5, 1));    Background:-webkit-linear-gradient (Top, #80a9da 0, #6f97c5 100%);    Background:-moz-linear-gradient (Top, #80a9da 0, #6f97c5 100%);    Background:-o-linear-gradient (Top, #80a9da 0, #6f97c5 100%);    Background:linear-gradient (Top, #80a9da 0, #6f97c5 100%); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= ' #80a9da ', endcolorstr= ' #6f97c5 ', gradienttype=0    );    padding-left:90px;    padding-right:105px;    height:90px;    Display:inline-block;    position:relative;    border:1px solid #5d81ab;    -webkit-box-shadow:0px 1px 1px rgba (255,255,255,0.8) inset, 1px 1px 3px rgba (0,0,0,0.2);    -moz-box-shadow:0px 1px 1px rgba (255,255,255,0.8) inset, 1px 1px 3px rgba (0,0,0,0.2);    box-shadow:0px 1px 1px rgba (255,255,255,0.8) inset, 1px 1px 3px rgba (0,0,0,0.2);    -webkit-border-radius:4px;    -moz-border-radius:4px; Border-radius:4px;    Float:left;    Clear:both;    margin:10px 0px;    Overflow:hidden;    -webkit-transition:box-shadow 0.3s ease-in-out;    -moz-transition:box-shadow 0.3s ease-in-out;    -o-transition:box-shadow 0.3s ease-in-out; Transition:box-shadow 0.3s ease-in-out;}.    A-btn img{Position:absolute;    left:15px;    top:13px;    Border:none;    -webkit-transition:all 0.3s ease-in-out;    -moz-transition:all 0.3s ease-in-out;    -o-transition:all 0.3s ease-in-out; Transition:all 0.3s ease-in-out;}.    A-btn. a-btn-slide-text{Position:absolute;    font-size:36px;    top:18px;    left:18px;    Color: #bde086;    text-shadow:0px 1px 1px rgba (0,0,0,0.3);    -webkit-transform:scale (0);    -moz-transform:scale (0);    -ms-transform:scale (0);    -o-transform:scale (0);    Transform:scale (0);    opacity:0;    -webkit-transition:all 0.3s ease-in-out;    -moz-transition:all 0.3s ease-in-out;    -o-transition:all 0.3s ease-in-out; Transition:all 0.3s ease-in-out;}. a-btn-text{padding-top:13px;    Display:block;    font-size:30px; text-shadow:0px-1px 1px #5d81ab;}.    A-btn-text small{Display:block;    font-size:11px; letter-spacing:1px;}.    a-btn-icon-right{Position:absolute;    right:0px;    top:0px;    height:100%;    width:80px;    border-left:1px solid #5d81ab;    -webkit-box-shadow:1px 0px 1px rgba (255,255,255,0.4) inset;    -moz-box-shadow:1px 0px 1px rgba (255,255,255,0.4) inset; box-shadow:1px 0px 1px rgba (255,255,255,0.4) inset;}.    A-btn-icon-right span{width:38px;    height:38px;    opacity:0.7;    -webkit-border-radius:20px;    -moz-border-radius:20px;    border-radius:20px;    Position:absolute;    left:50%;    top:50%;    margin:-20px 0px 0px-20px;    border:1px solid Rgba (0,0,0,0.5); Background: #5b5b5b URL (...    /images/arrow_down.png) No-repeat Center Center;    -webkit-box-shadow:0px 1px 1px rgba (255,255,255,0.3) inset, 0px 1px 2px rgba (255,255,255,0.5); -moz-box-shadow:0px 1px 1px rgba (255,255,255,0.3) inset, 0px 1px 2px rgba (255,255,255,0.5);    box-shadow:0px 1px 1px rgba (255,255,255,0.3) inset, 0px 1px 2px rgba (255,255,255,0.5);    -webkit-transition:all 0.3s ease-in-out;    -moz-transition:all 0.3s ease-in-out;    -o-transition:all 0.3s ease-in-out; Transition:all 0.3s ease-in-out;}.    a-btn:hover{-webkit-box-shadow:0px 1px 1px rgba (255,255,255,0.8) inset, 1px 1px 5px rgba (0,0,0,0.4);    -moz-box-shadow:0px 1px 1px rgba (255,255,255,0.8) inset, 1px 1px 5px rgba (0,0,0,0.4); box-shadow:0px 1px 1px rgba (255,255,255,0.8) inset, 1px 1px 5px rgba (0,0,0,0.4);}. A-btn:hover img{opacity:0;}.    A-btn:hover. a-btn-slide-text{opacity:1;    -webkit-transform:scale (1);    -moz-transform:scale (1);    -ms-transform:scale (1);    -o-transform:scale (1); Transform:scale (1);}.    A-btn:hover. A-btn-icon-right span{opacity:1; Background-color: #bc3532;}.    a-btn:active{position:relative;    top:1px;    Background: #5d81ab;    -webkit-box-shadow:1px 1px 2px rgba (0,0,0,0.4) inset; -moz-box-shadow:1px 1px 2px Rgba (0,0, 0,0.4) inset;    box-shadow:1px 1px 2px rgba (0,0,0,0.4) inset; Border-color: #80a9da;}.    A-btn:active. A-btn-icon-right span{-webkit-transform:rotate (360deg);    -moz-transform:rotate (360DEG);    -ms-transform:rotate (360DEG);    -o-transform:rotate (360DEG); Transform:rotate (360deg);}

"Recommended for the relevant content"

Introduction of several new technologies in CSS3

CSS3 Tutorials | CSS3 Latest Version Reference manual | PHP Chinese Web Tutorial

Browser compatibility issues with CSS3