在現在越來越多的Web應用中,點贊功能已經成為了必備的功能之一。要讓這個功能變得更加有趣和美觀,我們可以使用CSS3來實現點贊效果。
.like { display: inline-block; padding: 5px 8px; border: 1px solid #ccc; border-radius: 3px; font-size: 14px; color: #333; cursor: pointer; } .like:hover, .like.active { background: #2196F3; border-color: #2196F3; color: #fff; }
以上CSS代碼使用了border、border-radius、color、cursor、display等CSS屬性來設置點贊的樣式。其中,display屬性為inline-block,讓點贊按鈕具有行內塊級元素的特性,能夠使多個點贊按鈕并排橫向排列。而padding、border-radius、color等屬性則設置了按鈕的內邊距、圓角、字體顏色等。
下面的:hover偽類和.active類則實現了點贊按鈕在鼠標移動到按鈕上或者已經被點贊的情況下的樣式,讓按鈕變成固定顏色的背景和白色字體。這就是在無需JavaScript的情況下,使用CSS3輕松實現點贊效果的方式。
上一篇css3點擊開關按鈕
下一篇css3炫酷進度條