这个案例是使用CSS3制作的一个媒体分享圆形按钮。效果看起来很简单,其实制作也非常的简单的,主要就是径向渐变的运用,以及@font-face实现的ICON效果,当然其中也离开不其他属性的点缀效果,比如说box-shadow制作的阴影,transition制作的动画效果等。
HTML CODE
<button type="button" class="button">twitter</button> <button type="button" class="button">github</button>
CSS CODE
body { background: -webkit-radial-gradient(#fcfdfd,#9ca3a6); background: -moz-radial-gradient(#fcfdfd,#9ca3a6); background: -ms-radial-gradient(#fcfdfd,#9ca3a6); background: -o-radial-gradient(#fcfdfd,#9ca3a6); background: radial-gradient(#fcfdfd,#9ca3a6); } .demo { width: 400px; text-align: center; margin:80px auto 0; } .button { 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); background: 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; 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'; src:url('fonts/icomoon.eot'); src: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; }
如需转载,烦请注明出处:http://www.w3cplus.com/demo/social-media-buttons.html