css按鈕交互效果

hsluoyz 發布于2019-08-30 15:44 / 2576人閱讀

摘要：最近在網上閑逛時，發現了這個毒雞湯，內容有趣，按鈕交互做的也很棒，簡約而不簡單。于是就把按鈕交互的效果拿來學習一下。然后說一下就是元素的陰影效果，該屬性可以讓幾乎所有元素的邊框產生陰影。利用這個效果來模擬按鈕塌陷。

最近在網上閑逛時，發現了http://www.nows.fun/ 這個毒雞湯，內容有趣，按鈕交互做的也很棒，簡約而不簡單。于是就把按鈕交互的效果拿來學習一下。
總體上來說，是利用了:active和box-shadow兩個特性來實現的。希望通過這個簡單效果，能讓更多的朋友喜歡上css.
首先來說一下:active，就是當用戶按住一個a標簽的時候的意思，鼠標點擊下去但沒有松開的時候就這樣樣子啦。
然后說一下box-shaow,就是元素的陰影效果，該屬性可以讓幾乎所有元素的邊框產生陰影。利用這個效果來模擬按鈕塌陷。這部分代碼還是比較簡單的，先整出來沒有加效果的按鈕

html代碼


  
    CLICK ME PLEASE

css代碼

.btn{
  display:inline-block;
  background:#1aaf5d;
  height:30px;
  line-height:30px;  
  text-align:center;
  border-radius:25px;
  font-weight:bold;
  letter-spacing:1px;
  padding:10px 15px;
}
.btn-text{
  color:#fff;
  text-decoration:none;
  padding:10px 16px;
  font-size:12px;
  border-radius: 16px;
}

看起來還挺像那么回事

下面加上:active的css代碼，加上一點點深色的陰影，使之看起來就好像塌陷下去了一樣

.btn-text:active{
  box-shadow:inset 0 1px 2px #16665d;
}

怎么樣，看起來還不錯吧。
原版的可以去http://www.nows.fun/ 看。
終極劃水摸魚超級大懶蟲簡易版點擊這里
https://codepen.io/Ritr/pen/d...

參考鏈接：
https://developer.mozilla.org...

https://developer.mozilla.org...:active

GPU云服務器云服務器 html交互式效果 css效果 android按鈕效果 js與css交互

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/116280.html

轉：CSS :placeholder-shown偽類實現Material Design占位符交互效果

摘要：轉自偽類實現占位符交互效果一規范中占位符交互效果風格占位符交互效果官方示意見此頁面。我們可以采用絕對定位最后，對這個元素在輸入框時候，以及非顯示的時候進行重定位縮小并位移到上方四清除按鈕部分上是必要屬性，配合偽類實現我們的效果。轉自： https://github.com/yougola/bl... CSS :placeholder-shown偽類實現Material Design占...

gaara 2019-08-30 15:44 評論0 收藏0
前端每日實戰：5# 視頻演示如何用 CSS 創作一個立體滑動 toggle 交互控件

摘要：效果預覽按下右側的點擊預覽按鈕在當前頁面預覽，點擊鏈接全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbyv7?w=500&h=500); 效果預覽按下右側的點擊預覽按鈕在當前頁面預覽，點擊鏈接全屏預覽。 https://codepen.io/zhang-ou/pen/...

hosition 2019-08-29 15:12 評論0 收藏0
前端每日實戰：5# 視頻演示如何用 CSS 創作一個立體滑動 toggle 交互控件

摘要：效果預覽按下右側的點擊預覽按鈕在當前頁面預覽，點擊鏈接全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbbyv7?w=500&h=500); 效果預覽按下右側的點擊預覽按鈕在當前頁面預覽，點擊鏈接全屏預覽。 https://codepen.io/zhang-ou/pen/...

yy736044583 2019-08-02 10:18 評論0 收藏0
前端每日實戰：9# 視頻演示如何用純 CSS 創作一種按鈕被瞄準的交互特效

摘要：效果預覽按下右側的點擊預覽按鈕在當前頁面預覽，點擊鏈接全屏預覽。可交互視頻教程此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbb1Vv?w=500&h=500); 效果預覽按下右側的點擊預覽按鈕在當前頁面預覽，點擊鏈接全屏預覽。 https://codepen.io/zhang-ou/pen/...

solocoder 2019-08-29 15:15 評論0 收藏0