Home > Web Front-end > CSS Tutorial > Share a metallic button style code

Share a metallic button style code

yulia
Release: 2018-09-11 15:01:06
Original
2234 people have browsed it

In the project, almost all websites will use buttons, ranging from a dozen to a few. A practical and good-looking button can add a lot of color to the page, thereby attracting the user's attention. When browsing the website, I see some nice-looking and cool buttons. Take them and share them with everyone. If you need to use them next time, just copy them.

HTML part:

<div id="button">
    <a class="butt">PUSH</a>
</div>
Copy after login

CSS part:

body {background: #ddd;}   
   #button {
     width: 100px;
     height: 100px;  
     border-bottom: 2px solid #eee;     
     background-image: -webkit-linear-gradient(top, #999, #d0d0d0 80% );
     background-image: -moz-linear-gradient(top, #999, #d0d0d0 80% );
     background-image: -ms-linear-gradient(top, #999, #d0d0d0 80% );
     background-image: -o-linear-gradient(top, #999, #d0d0d0 80% );
     background-image: linear-gradient(top, #999, #d0d0d0 80% );     
     -moz-border-radius: 100px;  
     -webkit-border-radius: 100px;  
     border-radius: 100px;     
     box-shadow: inset rgba(0,0,0,0.2) 0px 5px 6px ;     
     left: 50%;
     top: 50%;
     margin-left: -50px;
     margin-top: -50px;
     position: absolute;
   }   
   .butt {
     position: absolute;
     width: 80px;
     height: 52px;
     left: 10px;
     top: 10px;
     cursor: pointer;
     font-family: "Lucida Sans";
     font-weight: bold;
     font-size: 23px;
     color: #888;
     text-shadow: 0px 1px 0px #fff;
     text-align: center;
     padding-top: 28px;     
     -moz-border-radius: 100px;  
     -webkit-border-radius: 100px;  
     border-radius: 100px;       
     background-image: -webkit-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
     background-image: -moz-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
     background-image: -ms-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
     background-image: -o-linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );
     background-image: linear-gradient(top, #eee, #bbb 70%, #9f9f9f 100% );     
     background-position: 0 6px;
     background-color: #eee;
     background-repeat: no-repeat;     
     -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 6px;  
     -moz-box-shadow: rgba(0,0,0,.4) 0 3px 6px;  
     box-shadow: rgba(0,0,0,.4) 0 3px 6px;     
     -webkit-transition: all .1s ease-in;
     -moz-transition: all .1s ease-in;
     -ms-transition: all .1s ease-in;
     -o-transition: all .1s ease-in;
     transition: all .1s ease-in;
   }   
   .butt:hover {
     background-position: 0 0px;     
     -webkit-box-shadow: rgba(0,0,0,.4) 0 3px 8px;  
     -moz-box-shadow: rgba(0,0,0,.4) 0 3px 8px;  
     box-shadow: rgba(0,0,0,.4) 0 3px 8px;
   }   
   .butt:active {
     width: 76px;
     height: 48px;
     margin: 2px 0 0 2px;   
     border-bottom: 1px solid #fff;
     font-size: 21px;
     color: #777;   
     -webkit-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
     -moz-box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
     box-shadow: inset rgba(0,0,0,.5) 0px 5px 10px;
   }
Copy after login

Rendering:

Share a metallic button style code

##The above shared a very Metallic button code, more cool effects, please follow me!

The above is the detailed content of Share a metallic button style code. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template