试做一个播放按钮

马黑黑

代码：

1. 
   
2. <style type="text/css">
   
3. 
   
4. .mBtn {
   
5.         width: 40px;
   
6.         height: 40px;
   
7.         line-height: 40px;
   
8.         color: olive;
   
9.         background: transparent;
   
10.         border: 0;
    
11.         border-radius: 25%;
    
12.         box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
    
13.         font-size: 12px;
    
14.         text-align: center;
    
15. }
    
16. 
    
17. .mBtn:hover {
    
18.         cursor: pointer;
    
19.         box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
    
20.         color: black;
    
21. }
    
22. 
    
23. .mBtn:active {
    
24.         transform: scale(0.98);
    
25.         box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
    
26.         color: red;
    
27. }
    
28. 
    
29. </style>
    
30. 
    
31. <div class="mBtn">&#9654;</div>

复制代码

马黑黑

演示效果：
 

▶

马黑黑

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

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

马黑黑

看看父元素背景色为 olive 时按钮的表现：
 

糖

马黑黑

看看父元素背景色为 pink 时按钮的表现：
 

果

马黑黑

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

绿叶清舟

这个漂亮还有糖吃啊

马黑黑

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

吃糖美容

绿叶清舟

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

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

绿叶清舟

不许动

马黑黑

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

字多了

马黑黑

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

你把 div 改为 input 也是可以的

马黑黑

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

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

绿叶清舟

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

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

马黑黑

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

可以，button，input，也都可以

加林森

▶

加林森

怎么把音乐装进去呢？

马黑黑

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

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

红影

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

红影

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

队长看黑黑后一个帖子，是有音乐关联的。