在傾斜類按鈕中沒有傾斜的文本

我已經爲我的網站創建了一個CSS類的按鈕，我希望它具有平行四邊形形狀，所以我使用傾斜函數來創建形狀。代碼是正確的，並且按鈕具有我想要的形狀，但按鈕的包裝後，按鈕內部的文本也出現偏斜。有一種方法可以讓文本看起來不像按鈕裏面的斜塔嗎？這裏的html代碼：在傾斜類按鈕中沒有傾斜的文本

<input type="submit" alt="submit" value="Login" class="button">

這就是Button類的CSS：

.button { 
    float: top; 
    width: 275px; 
    height: 40px; 
    margin-top: 6px; 
    display: inline-block; 
    font-family: Impact; 
    text-align: center; 
    -webkit-transform: skewX(20deg); 
    -moz-transform: skewX(20deg); 
    -o-transform: skewX(20deg); 
    transform: skewX(20deg); 
}

來源

2012-10-07 Janinho67

天色借調Sidharth，我想你不會包裝元素各地得到應用的CSS變換，然後重新設置爲它的子元素（提交 - 輸入）：

<div class="button-wrapper"> 
    <input type="submit" alt="submit" value="Login"> 
</div>

Sidharth的答案意味着你完全隱藏了原來的<input>，並且在點擊了樣式化包裝的時候依靠JavaScript來點擊它，但這裏很簡單：在:hover上設置button-wrapper並刪除嵌套<input> -element中的所有樣式它100％寬（jsBin example）：

.button-wrapper { 
    background: #fff; 
    border: 1px solid #bbb; 
    border-color: #ddd #ccC#bbb; 
    overflow: hidden; 

    -webkit-transform: skewX(20deg); 
    -moz-transform: skewX(20deg); 
    -o-transform: skewX(20deg); 
    transform: skewX(20deg); 
} 

.button-wrapper:hover { 
    background: #efe; 
    border-color: #090; 
} 

.button-wrapper input { 
    background: transparent; 
    border: 0; 
    cursor: pointer; 
    font-size: 20px; 
    font-weight: bold; 
    padding: 4px 0; 
    margin: 0; 
    width: 100%; 

    -webkit-transform: skewX(-20deg); 
    -moz-transform: skewX(-20deg); 
    -o-transform: skewX(-20deg); 
    transform: skewX(-20deg); 
} 

.button-wrapper input:hover { 
    color: #060; 
}

來源

2012-10-07 01:46:30

它的工作完美。。非常感謝你！ :) – Janinho67

的「按鈕」創建一個包裝，並把裏面的文字說。但是，如果文本被點擊，您將需要使用javascript觸發按鈕上的「單擊」，否則它將「傳播」到按鈕。

來源

2012-10-07 01:04:05

我知道幾年有過去，但我只是碰到了這個同樣的問題，發現根本做上的文字反向傾斜解決我的問題，因爲在我的代碼如下：

.yellowShape { 
    background-color: rgba(244,255,88,0.92); 
    padding: 3px; 
    -webkit-transform: skew(20deg); 
    transform: skew(20deg); 
} 

.yellowShape p { 
    -webkit-transform: skew(-20deg); 
    transform: skew(-20deg); 
}

來源

2014-07-16 03:08:40 xtine

在傾斜類按鈕中沒有傾斜的文本

回答

相關問題