CSS writing-mode与text-indent文字下沉效果实例页面

回到相关文章 »

代码:

CSS代码:
.btn {
    display: block;
    color: #a78252;
    background-color: #ddc390;
    width: 85px; height: 85px;
    line-height: 85px;
    border: 6px solid #ddc390;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px #d6b681, 0 1px, 0 2px, 0 3px, 0 4px;
    text-align: center;
    -webkit-transition: border-color .25s, background-color .25s;
    transition: border-color .25s, background-color .25s;    
    font-size: 42px;
    cursor: pointer;
}

.btn:active {
    text-indent: 2px;
}

.verticle-mode {
    writing-mode: tb-rl;
    -webkit-writing-mode: vertical-rl;      
    writing-mode: vertical-rl;
    *writing-mode: tb-rl;
}
                
HTML代码:
<p>恭喜你中了88元红包!</p>
<a href="javascript:" class="btn verticle-mode">领</a>
                

效果:

恭喜你中了88元红包!