纯CSS3制作4色圆形Logo

feature-speed.png

Mou官网Logo及Button制作——纯CSS

---

1.Logo

效果1：

mou_logo02.png

效果2（鼠标经过时）：

mou_logo.png

实现原理很简单，给四边设置不同的颜色即可

HTML代码

25.io

CSS 代码

 .logo {
    display: inline-block;
    float: left;
    font-family: Avenir,"proxima-nova",Helvetica,Arial,sans-serif;
    font-weight: 600;
    color: #444;
    width: 3.6rem;
    height: 3.6rem;
    text-align: center;
    border-top: 6px solid #edb168;
    border-left: 6px solid #354c58;
    border-bottom: 6px solid #dc5653;
    border-right: 6px solid #4db09e;
    border-radius: 50%;
    -webkit-transition: border-color .5s;
    transition: border-color .5s
}

 .logo:hover {
    border-top: 6px solid #4db09e;
    border-left: 6px solid #edb168;
    border-bottom: 6px solid #354c58;
    border-right: 6px solid #dc5653
}

2.Button

效果1：

mou_button02.png

效果2（鼠标经过时）：

mou_button.png

HTML代码

Download

CSS代码

.download {
        text-decoration:        none;
        font-size: 1.5rem;
        line-height: 1;
        font-weight:            bold;
        text-shadow:            rgba(255,255,255,.5) 0 1px 0;
        -webkit-user-select:    none;
        -moz-user-select:       none;
        user-select:            none;
        
    /* layout */
        padding:                .5em 1.2em .4em .8em;   
        margin:                 .5em;
        display:                inline-block;
        position:               relative;
        border-top:             none;
        border-bottom:      1px solid rgba(0,0,0,0.1);
        -webkit-border-radius:  1em; 
        -moz-border-radius:     1em; 
        border-radius:          1em; 
        
    /* effects */
        background-image:   -webkit-gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(img/noise.png);
        background-image:   -moz-radial-gradient(top, ellipse cover, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0) 100%), url(img/noise.png);
        background-image:   gradient(radial, 50% 0, 100, 50% 0, 0, from( rgba(255,255,255,0) ), to( rgba(255,255,255,0.7) )), url(img/noise.png);
        -webkit-transition:     -webkit-border-radius .3s ease-in-out;
        -moz-transition:        -moz-border-radius .3s ease-in-out;
        transition:             -moz-border-radius .3s ease-in-out;
        
    /* color */
        color:              hsl(208, 50%, 40%) !important;
        background-color:   hsl(208, 100%, 75%);
        -webkit-box-shadow: inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
                                hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
                                rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        -moz-box-shadow:    inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
                                hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
                                rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
        box-shadow:         inset rgba(255,254,255,0.6) 0 0.3em .3em, inset rgba(0,0,0,0.15) 0 -0.1em .3em, /* inner shadow */ 
                                hsl(208, 50%, 55%) 0 .1em 3px, hsl(208, 50%, 40%) 0 .3em 1px, /* color border */
                                rgba(0,0,0,0.2) 0 .5em 5px; /* drop shadow */
    }
    .download:hover {
        background-color: hsl(208, 100%, 83%);
        border-top: none; 
        -webkit-border-radius:  1em; 
        -moz-border-radius:     1em; 
        border-radius:          1em; 
        -webkit-border-radius:  5em 1em / 5em 1em;  
        -moz-border-radius:     5em 1em / 5em 1em;  
        border-radius:          5em 1em / 5em 1em; 
        border-top:             none;
        border-bottom:      1px solid rgba(0,0,0,0.1);
    }