需要一個加載圖標顯示在只有CSS的鼠標點擊

有沒有一種方法可以讓一個加載圖標顯示一個按鈕/鏈接被點擊，只有CSS/HTML？需要一個加載圖標顯示在只有CSS的鼠標點擊

我使用FontAwesome，所以我想我可以使用它們的類來旋轉加載圖標，但我找不到一種方法讓它在特定操作（鼠標點擊）後旋轉。

基本上這是所有代碼：

<a href="#"><i class="fa fa-circle-o-notch fa-spin"></i> Spin</a>

我現在可以管理躲在它的背景顏色的唯一方法..但似乎並不很專業：

body { 
    background: none repeat scroll 0 0 #dcdcdc; 
    color: white; 
} 
.fa { 
    color: #dcdcdc; 
} 
a:active .fa { 
    color: red; 
}

任何建議？

來源

2014-10-30 CrossY

沒有，只用HTML和CSS你想要做的是不可能的，因爲你正在尋找的事件處理程序（點擊按鈕）請參閱以下鏈接：http：// stackoverflow.com/questions/19260401/change-background-on-button-click-using-css-only您將需要使用非標記語言，如JavaScript/jQuery。在此處查看「標記語言」和「編程語言」之間的區別：http://infospace.ischool.syr.edu/2012/04/05/why-html-is-not-a-programming-language/ – ctwheels 2014-10-30 22:34:29

如果看起來像一個按鈕的元素是可以接受的，只要你不需要支持IE8，你可以用這樣做。它的工作原理是使用label「for」複選框或收音機作爲按鈕。然後，:checked CSS僞類就可以了！

本示例設置div的背景顏色，但可以設置所需的任何屬性。

label { 
 
    display: inline-block; 
 
    background-color: #28529c; 
 
    color: white; 
 
    padding: 4px 8px; 
 
} 
 
#loading { 
 
    background-color: transparent; 
 
    width: 20px; 
 
    height: 20px; 
 
} 
 
#hidden-flag { 
 
    display: none; 
 
} 
 
#hidden-flag:checked ~ #loading { 
 
    background-color: green; 
 
    display: inline-block; 
 
    padding-left: 10px; 
 
}

<input id="hidden-flag" type="radio"> 
 
<label for="hidden-flag">Button</label> 
 
<div id="loading"></div>

來源

2014-10-30 23:05:57 Talmid

這是所有遠離我的舒適區（我只熟悉基本的HTML/CSS），但我試圖風格的按鈕是在Wordpress（WooCommerce）： '

' 我不確定您的代碼是否適用於此。 – CrossY 2014-10-30 23:46:49

@CrossY是的，因爲你的按鈕需要提交表單，所以你不能使用我的解決方案，而不使用JavaScript，此時你可以使用JavaScript來顯示加載圖標。 – Talmid 2014-10-31 02:25:20

需要一點的工作，但因爲我要到B渦流輪空現在我不與它進行着，明天早。純CSS的未完成的例子。當新的頁面加載時，只需帶入一組新的按鈕即可點擊。

#to_click:visited { 
 
    content:""; 
 
    display: block; 
 
    float: left; 
 
    position: relative; 
 
    margin: 40px 30px; 
 
    border-radius: 100px; 
 
    width: 20px; 
 
    height: 20px; 
 
    border: 5px solid #57E; 
 
    border-top-color: transparent; 
 
    border-bottom-color: transparent; 
 
    animation-name: rotateclock; 
 
    animation-duration: .75s; 
 
    animation-iteration-count: infinite; 
 
    animation-timing-function: linear; 
 
} 
 

 
#to_click:before { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    border-radius: 100px; 
 
    width: 10px; 
 
    height: 10px; 
 
    border: 5px solid #57E; 
 
    border-left-color: transparent; 
 
    border-right-color: transparent; 
 
} 
 

 
#to_click:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    top: 5px; 
 
    left: 5px; 
 
    border-radius: 100px; 
 
    width: 0px; 
 
    height: 0px; 
 
    border: 5px solid #57E; 
 
    border-top-color: transparent; 
 
    border-bottom-color: transparent; 
 
} 
 

 
@keyframes rotateclock { 
 
    0% { transform: rotate(0deg); } 
 
    100% { transform: rotate(360deg); } 
 
}

<a href="#" id="to_click">Click Me</a>

來源

2014-10-30 23:44:07 Billy

需要一個加載圖標顯示在只有CSS的鼠標點擊

回答

相關問題