如何在僞類之前使用跨度創建輸入？

這是我在StackOverflow中的firts問題... 我有一個輸入類型按鈕，我想在此動畫（http://codepen.io/anon/pen/emodKG）之前添加一個僞類：class。我知道這是不可能的，因爲輸入不能包含任何東西。所以我嘗試添加一個跨度與我的輸入，這個跨度我給班級「btn」從CodePen ...如何在僞類之前使用跨度創建輸入？

問題是跨度是我的輸入，我有動畫，但它不可點擊。

<span class="btn"><input type="button"></span>

來源

2015-04-01 Mathieu Bouttaz

使用''

是的，我知道，但我不能，我必須使用這個輸入 – 2015-04-01 15:15:01

試試這個，我認爲這將幫助你:)

.btn { 
 
    position: relative; 
 
    display: block; 
 
    margin: 30px auto; 
 
    padding: 20px; 
 
    overflow: hidden; 
 
    border-width: 0; 
 
    outline: none; 
 
    border-radius: 2px; 
 
    box-shadow: 0 1px 4px rgba(0, 0, 0, .6); 
 
    background-color: #2ecc71; 
 
    color: #ecf0f1; 
 
    transition: background-color .8s; 
 
    text-align: center; 
 
} 
 
.btn:hover, 
 
.btn:focus { 
 
    background-color: #27ae60; 
 
} 
 
.btn:before { 
 
    content: ""; 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    display: block; 
 
    width: 0; 
 
    padding-top: 0; 
 
    border-radius: 100%; 
 
    background-color: rgba(236, 240, 241, .2); 
 
    -webkit-transform: translate(-50%, -50%); 
 
    -moz-transform: translate(-50%, -50%); 
 
    -ms-transform: translate(-50%, -50%); 
 
    -o-transform: translate(-50%, -50%); 
 
    transform: translate(-50%, -50%); 
 
} 
 
.btn:active:before { 
 
    width: 100%; 
 
    padding-top: 100%; 
 
    transition: width .1s ease-out, padding-top .1s ease-out; 
 
} 
 
.btn input { 
 
    display: none; 
 
}

<label class="btn"><input type="button" />Button</label>

來源

2015-04-01 15:59:58 w3debugger

謝謝，這正是我想要做的 – 2015-04-03 06:41:55

如何在僞類之前使用跨度創建輸入？

回答

相關問題