CSS3 带图标社交登录按钮设计

2014-05-01 09:16:46 -0400

此代码仅供参考

代码说明

CSS3 Social Login Buttons (带图标社交登录按钮设计)

html代码

@import url(http://fonts.useso.com/css?family=Oswald);
body {
    /* Styles for buttons container */
    
    background: #c8dfeb;
    font-size: 14px;
}
.container {
    left: 50%;
    margin: -86px 0 0 -103px;
    /* Facebook */
    
    position: absolute;
    top: 50%;
}
.fb-icon-bg {
    background: #354f88;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.fb-icon-bg:after {
    content: url(/uploads/150701/feiji.png);
    display: block;
    padding: 9px 10px 5px 15px;
}
.fb-bg {
    background: #3b5998;
    display: block;
    height: 37px;
    margin: 0 0 30px 41px;
    width: 166px;
}
.fb-bg:after {
    color: #fff;
    content: "sign in with facebook";
    font-family: 'Oswald', sans-serif;
    height: 37px;
    left: 8%; /*建议改为text-align: center;*/
    position: relative;
    text-transform: uppercase;
    top: 22%;
    width: 41px;
}
.fb-bg:hover {
    cursor: pointer;
}
.fb-bg:active {
    background: #354f88;
}
.twi-icon-bg:after {
    content: url(/uploads/150701/feiji.png);
    display: block;
    padding: 11px 10px 6px 11px;
}
.twi-icon-bg {
    background: #40a2d1;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.twi-bg {
    background: #45b0e3;
    height: 37px;
    margin: 0 0 30px 41px;
    width: 166px;
}
.twi-bg:after {
    color: #fff;
    content: "sign in with twitter";
    font-family: 'Oswald', sans-serif;
    height: 37px;
    left: 11%; /*建议改为text-align: center;*/
    position: relative;
    text-transform: uppercase;
    top: 22%;
    width: 41px;
}
.twi-bg:hover {
    cursor: pointer;
}
.twi-bg:active {
    background: #40a2d1;
}
.g-icon-bg:after {
    content: url(/uploads/150701/feiji.png);
    display: block;
    padding: 11px 10px 6px 13px;
}
.g-icon-bg {
    background: #ce3e26;
    height: 37px;
    margin: 0 0 -37px 0;
    width: 41px;
}
.g-bg {
    background: #de4c34;
    height: 37px;
    margin-left: 41px;
    width: 166px;
}
.g-bg:after {
    color: #fff;
    content: "sign in with google+";
    font-family: 'Oswald', sans-serif;
    height: 37px;
    left: 10%; /*建议改为text-align: center;*/
    position: relative;
    text-transform: uppercase;
    top: 22%;
    width: 41px;
}
.g-bg:hover {
    cursor: pointer;
}
.g-bg:active {
    background: #ce3e26;
}
</style>

代码演示

feiji.png (1.28 KiB) | Meta

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N