按鈕上的Css過渡/影片將文本移動到頂部并使其消失，然后在先前文本顯示的位置顯示其他文本-有解無憂

我需要創建一個帶有提交文本的按鈕。當用戶點擊它時，提交文本應該過渡到頂部，當它觸摸按鈕邊緣時，它應該消失，其他名為 Submitted 的文本應該從底部過渡并顯示在提交文本顯示的相同位置。我嘗試了幾種方法，但在實作此功能時遇到問題

CSS是：

.container {
  width:100%;
  text-align:center;
  margin:30px 0;
  font-family:sans-serif;
}

.button {
  display:inline-block;
  height:60px;
  line-height:60px;
  
  position:relative;
  text-align:center;
  background-color:#16a756;
  color:white;
  border-radius:2px;
  transition:0.3s;
}

.button:hover {background:#19c664;}

/* BUTTON UP */
.label-up {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:0%;
  transition:0.3s;
}

.sb {
  color: red;
  visibility: hidden;
}

.button:hover .label-up {
  top:-100%;
}

.button:hover .sb {
  position: relative;
  transition:0.3s;
  top: -70px;
}

下面是codepen鏈接。我試圖在按鈕懸停時實作這一點，單擊事件我可以管理

https://codepen.io/samuelbeard/pen/kWVrZv

uj5u.com熱心網友回復：

你可以通過一點點javascript來做到這一點。

我添加了按鈕功能。您可以對按鈕向下執行相同的操作。

代碼筆： https ://codepen.io/uiexpo/pen/jOZwmZG

發生了什么變化？

為按鈕添加了 id
在 CSS 中，而不是 :hover 使用類來改變狀態

document.getElementById("buttonup").addEventListener("click", function() {
  this.classList.add('move-label-up')
})

.container {
  width:100%;
  text-align:center;
  margin:30px 0;
  font-family:sans-serif;
}

.button {
  display:inline-block;
  height:60px;
  line-height:60px;
  overflow:hidden;
  position:relative;
  text-align:center;
  background-color:#16a756;
  color:white;
  border-radius:2px;
  transition:0.3s;
}

.button:hover {background:#19c664;}

/* BUTTON UP */
.label-up {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:0%;
  transition:0.3s;
}

.button.move-label-up .label-up {
  top:-100%;
}

/* BUTTON DOWN */
.label-down {
  display:block;
  margin:0px 30px;
  height:100%;
  position:relative;
  top:-100%;
  transition:0.3s;
}

.button:hover .label-down {
  top:0%;
}

<div class="container">
  <div class="button" id="buttonup">
    <span class="label-up">BUTTON UP</span>
    <span class="label-up">Submitted</span>
  </div>
</div>

<div class="container">
  <div class="button">
    <span class="label-down">BUTTON DOWN</span>
    <span class="label-down">BUTTON DOWN</span>
  </div>
</div>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/478803.html

標籤：html css

上一篇：如何在html檔案中使用行內css檔案的代碼

下一篇：CSS表單樣式、文本和按鈕在一起