返回顶部

收藏

css3 icon导航

更多
.appstorebutton {
    height: 80px;
    width: 80px;
    margin: 50px;
    position: relative;
    overflow: hidden;
    float: left;

    -webkit-border-radius: 40px;
       -moz-border-radius: 40px;
            border-radius: 40px;

    -webkit-transition: width 1s ease;
       -moz-transition: width 1s ease;
         -o-transition: width 1s ease;
        -ms-transition: width 1s ease;
            transition: width 1s ease;
}

.appstorebutton:hover {
    width: 275px;
}

.appstorebutton a {
    color: white;
    text-decoration: none;
}

/*Paragraph*/
.appstorebutton p {
    font: 30px/1 Helvetica, Arial, sans-serif;
    text-align: center;
    color: white;
    margin: 4px 0 0 65px;
    width: 180px;
}

.appstorebutton p small {
    font-size: 15px;
}

.iphone small:before {
    content: "O";
    position: absolute;
    font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
    top: 10px;
    left: 20px;
}

.ipad small:before {
    content: "Q";
    position: absolute;
    font: 70px/1 'ModernPictogramsNormal', Helvetica, sans-serif;
    top: 10px;
    left: 13px;
}

.mac small:before {
    content: url(imac.png);
    position: absolute;
    top: 22px;
    left: 18px;
}

/*Button Colors*/
.iphone {
    background: #7b7a7f;
}

.ipad {
    background: #2ea9dc;
}

.mac {
    background: #dc2e2e;
}

/*Font-Face*/
@font-face {
    font-family: 'ModernPictogramsNormal';
    src: url('modernpics-webfont.eot');
    src: url('modernpics-webfont.eot?#iefix') format('embedded-opentype'),
         url('modernpics-webfont.woff') format('woff'),
         url('modernpics-webfont.ttf') format('truetype'),
         url('modernpics-webfont.svg#ModernPictogramsNormal') format('svg');
    font-weight: normal;
    font-style: normal;
}

标签:html

收藏

0人收藏

支持

0

反对

0

发表评论