马黑黑 发表于 2022-1-16 08:08

试做一个播放按钮

代码：

<style type="text/css">

.mBtn {
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: olive;
        background: transparent;
        border: 0;
        border-radius: 25%;
        box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
        font-size: 12px;
        text-align: center;
}

.mBtn:hover {
        cursor: pointer;
        box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
        color: black;
}

.mBtn:active {
        transform: scale(0.98);
        box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
        color: red;
}

</style>

<div class="mBtn">▶</div>

马黑黑 发表于 2022-1-16 08:09

<p>演示效果：<br>&nbsp;</p>
<style type="text/css">

.mBtn {
        width: 40px;
        height: 40px;
        line-height: 40px;
        color: olive;
        background: transparent;
        border: 0;
        border-radius: 25%;
        box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
        font-size: 12px;
        text-align: center;
}

.mBtn:hover {
        cursor: pointer;
        box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
        color: black;
}

.mBtn:active {
        transform: scale(0.98);
        box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
        color: red;
}

</style>

<div class="mBtn">▶</div>

马黑黑 发表于 2022-1-16 08:13

这个是不是传说中的透明按钮？ @绿叶清舟

按钮有两个鼠标响应：移上来时和按下时。按钮背景透明，这可能意味着它跟随父元素的背景

马黑黑 发表于 2022-1-16 08:15

<div style="margin:100px; padding:20px; background: olive;">
        <p>看看父元素背景色为 olive 时按钮的表现：<br>&nbsp;</p>
        <div class="mBtn">糖</div>
</div>

马黑黑 发表于 2022-1-16 08:17

<div style="margin:100px; padding:20px; background: pink;">
        <p>看看父元素背景色为 pink 时按钮的表现：<br>&nbsp;</p>
        <div class="mBtn">果</div>
</div>

马黑黑 发表于 2022-1-16 08:18

从演示效果看，按钮的文本应依据父框背景做变化

绿叶清舟 发表于 2022-1-16 09:39

这个漂亮还有糖吃啊{:4_189:}

马黑黑 发表于 2022-1-16 09:45

绿叶清舟 发表于 2022-1-16 09:39
这个漂亮还有糖吃啊

吃糖美容

绿叶清舟 发表于 2022-1-16 09:50

马黑黑 发表于 2022-1-16 09:45
吃糖美容

用了这代码是不是下面一句就不用加了<input

绿叶清舟 发表于 2022-1-16 09:51



<style type="text/css">

.mBtn {
      width: 40px;
      height: 40px;
      line-height: 40px;
      color: olive;
      background: transparent;
      border: 0;
      border-radius: 25%;
      box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
      font-size: 8px;
      text-align: center;
}

.mBtn:hover {
      cursor: pointer;
      box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
      color: black;
}

.mBtn:active {
         transform: scale(0.98);
         box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
         color: red;
}

</style>

<div class="mBtn">不许动</div>

马黑黑 发表于 2022-1-16 09:58

绿叶清舟 发表于 2022-1-16 09:51
.mBtn {
      width: 40px;
      height: 40px;


字多了

马黑黑 发表于 2022-1-16 09:58

绿叶清舟 发表于 2022-1-16 09:50
用了这代码是不是下面一句就不用加了

你把 div 改为 input 也是可以的

马黑黑 发表于 2022-1-16 10:17

绿叶清舟 发表于 2022-1-16 09:50
用了这代码是不是下面一句就不用加了

input也可，button也行，替换掉 div 就好的

绿叶清舟 发表于 2022-1-16 10:21

马黑黑 发表于 2022-1-16 10:17
input也可，button也行，替换掉 div 就好的

用div，里面加移动的字也可以的吧

马黑黑 发表于 2022-1-16 10:34

绿叶清舟 发表于 2022-1-16 10:21
用div，里面加移动的字也可以的吧

可以，button，input，也都可以

加林森 发表于 2022-1-16 11:19

本帖最后由 加林森 于 2022-1-24 11:37 编辑 <br /><br />
<style type="text/css">

.mBtn {
      width: 40px;
      height: 40px;
      line-height: 40px;
      color: olive;
      background: transparent;
      border: 0;
      border-radius: 25%;
      box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
      font-size: 12px;
      text-align: center;
}

.mBtn:hover {
      cursor: pointer;
      box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
      color: black;
}

.mBtn:active {
         transform: scale(0.98);
         box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
         color: red;
}

</style>

<div class="mBtn">
<p><audio id="yinpin" src="https://wj.zp68.com/lxx/yunhua/20211217/01.mp3" controls="controls"></audio></p> ▶</div>

加林森 发表于 2022-1-16 11:28

怎么把音乐装进去呢？{:4_203:}

马黑黑 发表于 2022-1-16 11:42

加林森 发表于 2022-1-16 11:28
怎么把音乐装进去呢？

硬塞：加播放器，用JS将按钮和播放器建立关联

红影 发表于 2022-1-16 11:43

这个漂亮，还有鼠标上去后的变化，黑黑太伟大了，什么都能设计出来{:4_199:}

红影 发表于 2022-1-16 11:44

加林森 发表于 2022-1-16 11:28
怎么把音乐装进去呢？

队长看黑黑后一个帖子，是有音乐关联的。
页: [1] 2
查看完整版本: 试做一个播放按钮