This article mainly introduces the use of CSS3 to create nice-looking buttons, that is, the rounded corner click and slide button function to the right. I hope this introduction will be helpful to everyone.
Note: CSS3, CSS is used to control the style and layout of web pages. CSS3 is the latest CSS standard.
The specific code examples for using css3 to create nice-looking buttons are as follows:
<div class="container fix">
<h1>Animated Buttons <span>with CSS3 Transitions and Animations</span></h1>
<div class="content">
<div class="button-wrapper">
<a href="#" class="a-btn">
<span class="a-btn-text">Register now</span>
<span class="a-btn-slide-text">It's free!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-text">Become a member</span>
<span class="a-btn-slide-text">Sign up!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-text">Enter</span>
<span class="a-btn-slide-text">Log in!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
<a href="#" class="a-btn">
<span class="a-btn-text">Get an account</span>
<span class="a-btn-slide-text">For free!</span>
<span class="a-btn-icon-right"><span></span></span>
</a>
</div>
</div>
</div>
/*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);
}
[Related content recommendations]
Introducing several new technologies in CSS3
CSS3 tutorial | CSS3 latest version reference manual | php Chinese website tutorial
CSS3 browser compatibility issue
The above is the detailed content of How to use css3 to create nice-looking buttons?. For more information, please follow other related articles on the PHP Chinese website!
mpvue sum vue division
The specific process of connecting to wifi in win7 system
What are the e-commerce platforms?
What's wrong with the air switch tripping?
Introduction to the usage of rowid in oracle
Where to watch Douyin live replays
psp3000 crack
How to completely delete mongodb if the installation fails
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
