Home > Developer > JavaScript
Crystal button, crystal button Material
The previous article introduced how to create menu effects. This article will share with you about the implementation of the crystal button. This article will not involve javascript any more, we will implement all the effects in the same way as css, and there is no difficulty in the content. After learning this article, I believe that you will be amazed by the strong css, let's first look at the effect:
The top three buttons are implemented by changing the input tag through css. The following two buttons are two a tags, and the corresponding style is changed through css, let's take a look at the above results.
1. Button settings:
Add three input buttons on the interface:
<Input type = "submit" value = "submit"/> <input type = "button" value = "submit"/> <input type = "reset" value = "reset">
Css code:
input{ width: 100px; height: 40px; border: none; background-image: url(button/btn.png);}
The problem with this effect is that our background is fixed and cannot be changed as our content increases.
Ii. display the effect of tag:
A Tag:
<A href = "#"> <span> button </span> </a>
Css code:
a{ text-decoration: none; padding-left: 15px; display: inline-table; width: 100px; height: 40px; line-height: 40px; background: url(button/btn_bg.png);} a:HOVER{ background-position: 0 -80px;} a span{ display: inline-table; height: 40px; padding-right: 15px; color: #fff; background: url(button/btn_bg.png) right -40px;} a:HOVER span{ background-position: right -120px;}
3. added the rounded corner setting attribute in css3 to achieve the above effect:
A Tag:
<A href = "#" class = "button"> button </a>
Css adds the rounded corner attribute:
.button{ display: inline-table; height: 40px; color: #fff; padding: 0 15px; background: url(button/css3_btn_bg.png); text-align: center; border: 1px solid #3c8134; border-radius: 5px} .button:HOVER { background-position: 0 -40px;}
4. Finally, we end this article with a menu effect case:
:
Interface code:
<Body> <ul> <li> <a href = "#" class = "ac"> <span> homepage </span> </a> </li> <li> <a href = "#"> <span> latest product </span> </a> </li> <a href = "#"> <span> internal News </span> </a> </li> <a href = "#"> <span> Contact Us </span> </a> </ li> </ul> </body>
Css code:
<style type="text/css">body ul li {margin: 0px; padding: 0px; font-size: 12px; }ul { list-style-type: none; height: 27px; width:500px;border-bottom:2px solid #21530C}li { float: left; }a{display:inline-block;height:27px;line-height:27px;text-decoration:none;padding-left:9px;color:#000;margin-right:10px;}a span{display:inline-block;height:27px;padding-right:9px;}a:hover{ background:url(button/left.jpg) no-repeat ;}a:hover span{ background:url(button/right.jpg) no-repeat right #21530C;color:#fff;} </style>
Now we have shared the implementation of the crystal button. The css code here is the most basic. I believe there should be no difficulty. If you have any good ideas, please leave a message.
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
