The code required fonts I have been in the form of attachments, download down, Fonts directory and code page peer, so there is no problem. Don't put it in the wrong place!
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title> beautifully rounded button effects </title>
<style>
Body {
margin-top:100px;
padding-left:100px;
}
. demo {
width:400px;
Text-align:center;
margin:80px Auto 0;
}
. button {
Cursor:pointer;
position:relative;
font-size:0;
width:100px;
height:100px;
Text-align:center;
margin-right:50px;
border-radius:50%;
Border:none;
box-shadow:0 2px 5px Rgba (0,0,0,.4);
Background:-webkit-linear-gradient (top, #fff, #d5dbe1);
Background:-moz-linear-gradient (top, #fff, #d5dbe1);
Background:-ms-linear-gradient (top, #fff, #d5dbe1);
Background:-o-linear-gradient (top, #fff, #d5dbe1);
Linear-gradient (Top, #fff, #d5dbe1);
-webkit-transition:all. 13s ease-out;
-moz-transition:all. 13s ease-out;
-o-transition:all. 13s ease-out;
Transition:all. 13s ease-out;
}
. button:after {
Display:inline-block;
font-family: ' Icomoon ';
font-size:24px;
Color: #bdc0c1;
Content:attr (Data-icon);
Speak:none;
Font-weight:normal;
-webkit-font-smoothing:antialiased;
width:64px;
line-height:64px;
margin:10px;
border-radius:32px;
border:1px solid #efefef;
Box-shadow: -1px 0 0 #dbdcdd, 1px 0 0 #dbdcdd, 0 1px 0 #d0d1d2, 0 0 8px #fff;
Background:-webkit-linear-gradient (top left, #fcfcfc 50%, #dfe4e8);
}
. button:first-child:after {
Content: "\21";
}
. button:last-child:after {
Content: "\25";
}
. button:hover:after {
Color: #19a6e4;
box-shadow:0 1px 3px #d7d8d9 inset;
Background:-webkit-radial-gradient (#dbeef8, #f2f4f6 50%);
}
. button:active {
top:3px;
box-shadow:0 1px 3px #d7d8d9 inset;
}
@font-face {
font-family: ' Icomoon ';
URL (' Fonts/icomoon.eot ');
URL (' fonts/icomoon.eot #iefix ') format (' Embedded-opentype '),
URL (' fonts/icomoon.svg#icomoon ') format (' SVG '),
URL (' fonts/icomoon.woff ') format (' Woff '),
URL (' Fonts/icomoon.ttf ') format (' TrueType ');
Font-weight:normal;
Font-style:normal;
}
</style>
<body>
<div>
<div>
<button type= "button" >twitter</button>
<button type= "button" >github</button>
</div>
</section>
<section id= "Ad_w3cplus" >
<div>
<script type= "Text/javascript" >
/*250*250,*/
var cpro_id = "u1089145";
</script>
<script src=\ ' #\ ' "//cpro.baidustatic.com/cpro/ui/c.js" type= "Text/javascript" ></script>
</div>
<div>
<script type= "Text/javascript" >
/*250*250,*/
var cpro_id = "u1089141";
</script>
<script src=\ ' #\ ' "//cpro.baidustatic.com/cpro/ui/c.js" type= "Text/javascript" ></script>
</div>
<div>
<script type= "Text/javascript" >
/*250*250,*/
var cpro_id = "u1086065";
</script>
<script src=\ ' #\ ' "//cpro.baidustatic.com/cpro/ui/c.js" type= "Text/javascript" ></script>
</div>
<p><script type= "Text/javascript" >
var _bdhmprotocol = (("https:" = = Document.location.protocol)? "https://": "//" ("/http");
document.write (unescape ("%3cscript src=\ ' #\ '" + _bdhmprotocol + "hm.baidu.com/h.js% 3f177319b798978621f83845b12c86fa29 ' type= ' text/javascript '%3e%3c/script%3e "));
</script>
</p>
</section>
</div>
</body>
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
