css實現一個按鈕

阿新 • • 發佈：2021-01-05

技術標籤：css3

效果展示：
## HTML部分

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>按鈕</title>
  <link rel="stylesheet" 
 href="./style/main.css">
</head>

<body>
  <a href="javascript:;">
    <span>Button</span>
    <span>Button</span>
  </a>
</body>

</html>

CSS部分

*{
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  box-sizing 
: border-box;
}

body{
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #2c3e50;
}

a{
  position: relative;
  display: inline-block;
  width: 160px;
  height: 50px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, .15);
}

a span{
  position: absolute;
  top: 0;
  left 
: 0;
  width: 100%;
  height: 100%;
  background: #34495e;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 2px;
  font-size: 25px;
  text-transform: uppercase;
  color: #ffffff;
}


a span:nth-child(2){
  color: #34495e;
  background: #fff;
  overflow: hidden;
  z-index: 2;
  transition: all .5s;
  clip-path: polygon(76% 0, 100% 0%, 100% 100%, 71% 100%, 48% 50%);
}

a span:nth-child(1):hover ~ span:nth-child(2){
  clip-path: polygon(100% 0, 100% 0%, 100% 100%, 100% 100%, 100% 50%);
}
a span:nth-child(2):hover{
  clip-path: polygon(0 0, 100% 0%, 100% 100%, 0 100%, 0 50%);
}

css實現一個按鈕

技術標籤：css3 效果展示： ## HTML部分 <!DOCTYPE html> <html lang="en">

PHP實現一個按鈕點選上傳多個圖片操作示例

本文例項講述了PHP實現一個按鈕點選上傳多個圖片。分享給大家供大家參考，具體如下：

css實現一個電影卡片

1 <!DOCTYPE html>2 <html lang=\"en\"> 3 <head> 4<meta charset=\"UTF-8\"> 5<title></title>

css--實現一個文字少時居中，文字換行時居左的樣式

前言　　最近群裡的小夥伴去面試，遇到這樣一個問題，面試官問：\"用 css 對一行文字進行佈局，當文字不夠換行的時候，這行文字要居中顯示，當文字出現換行的時候，這行文字要靠左顯示。\"，遇到這樣的需求一下束

基於CSS實現MaterialUI按鈕點選動畫並封裝成 React 元件

前言作為一個前端框架的重度使用者,在技術選型上也會非常注意其生態和完整性.筆者先後開發過基於,react,angular等框架的專案,碧如vue生態的elementUI,ant-design-vue,iView等成熟的UI框架,react生態的ant-design,m

用css實現一個硬幣旋轉的效果

<!DOCTYPE html> <html> <head> <meta charset=\"utf-8\"> <title>銀幣旋轉效果</title>

用CSS實現一個抽獎轉盤

原文：https://www.cnblogs.com/wenruo/p/9732704.html 先上效果基本是用CSS實現的，沒有用圖片，加一丟丟JS。不過沒有考慮太多相容性。

前端面試題（6）—— css實現一個扇形

我居然兩天沒看面試題真可惡！！！要面試了有點小慌張臨時抱一下佛腳叭~

通過HTML+CSS 實現一個會動的泡泡

HTML程式碼 <!DOCTYPE html> <html> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\">

Qt實現一個支援QSS的Switch Button(開關按鈕)

技術標籤：Qt技術總結Qt常見問題qtcssc++ 目錄 Qt實現一個支援QSS的Switch Button(開關按鈕)問題解決思路實現方式其他不同的 Switch Button總結

每天學一個jquery外掛-css實現電風扇2

技術標籤：每天學一個jquery外掛javascriptjquery 每天一個jquery外掛-css實現電風扇2

Android中實現一個可拖動的懸浮按鈕，點選彈出選單的功能

如圖：實現思路通過重寫控制元件的onTouchEvent方法監聽觸控效果通過View的setX()和setY()方法實現移動使用屬性動畫實現邊緣吸附效果手指按下首先是處理手指按壓下的事件，這裡我們把拖拽識別符號設定為false並記

【轉】CSS 實現按鈕點選動效的套路

前言在 Web 中，大部分按鈕可能都是平平無奇的，有時候為了強調品牌特殊或者滿足特殊功能，可能需要給按鈕新增一點點選動效。比如，用過 Ant Design 的小夥伴應該都能發現，在點選按鈕的時候會有一個很微妙的水波動

SVG 和 CSS3 實現一個超酷愛心 Like 按鈕

在現代網頁中，我們經常可以在一些文章、視訊和圖片頁面上找到”Like”按鈕，並且通過點選該按鈕來表示自己對該內容的喜歡或者不喜歡。大部分”Like”按鈕是純文字按鈕或者圖片按鈕，如果你想讓它們具有特別的動畫特

從零實現一個React&ReactDOM（附程式碼）

前言作為一個react剛入門的小白，趁放假看了珠峰架構的從零實現react視訊，跟著敲了一下，為了加深記憶和理解，寫了這篇部落格。

什麼鬼，面試官竟然讓我用Redis實現一個訊息佇列？

[ 轉載 ]原文連結：blog.csdn.net/yelvgou9995… 眾所周知，redis是一個高效能的分散式key-value儲存系統，在NoSQL資料庫市場上，redis自己就佔據了將近半壁江山，足以見到其強大之處。同時，由於redis的單執行緒特性

7. SOFAJRaft原始碼分析—如何實現一個輕量級的物件池？

前言我在看SOFAJRaft的原始碼的時候看到了使用了物件池的技術，看了一下感覺要吃透的話還是要新開一篇文章來講，內容也比較充實，大家也可以學到之後運用到實際的專案中去。

教程：Laravel + Vuejs + Tailwind CSS 構建一個 Todo App 第一部分

文章轉發自專業的Laravel開發者社群，原始連結：learnku.com/laravel/t/3… 今天，我們通過 Vue.js，Laravel 以及 Tailwind 構建一個簡單的 todo 應用。為了節約時間，我們不提供任何的資料互動。但是不要擔心，

用java實現一個簡單的區塊鏈：UTXO交易模型

在上一篇用java實現一個簡單的區塊鏈中，我們主要講了什麼是區塊鏈（提示:區塊鏈就是談戀愛），以及區塊鏈是如何做到去中心化，不可篡改性的。然後就是通過解析國外一篇關於java區塊鏈的文章，用java實現了一個簡單的

什麼鬼，面試官竟然讓我用Redis實現一個訊息佇列！！？

GitHub 9.4k Star 的Java工程師成神之路，不來瞭解一下嗎? GitHub 9.4k Star 的Java工程師成神之路，真的不來瞭解一下嗎?

css實現一個按鈕

CSS部分

相關推薦