用css写一个简单的按钮

Posted 2023-04-26

按钮样式是这样的，最好鼠标悬浮有变暗的效果

参考技术A button 
    width:70px;
    height:30px;
    color:#fff; 
    text-align: center; 
    background-color:#c00; 
    color:#fff;
    line-height: 28px;
    border-radius:15px; 
    border:0; 
    outline: 0; 
    transition: background 0.2s 
 
button:hover 
    background:#666

<button>Go</button>

参考技术B .button
    width: 160px;
    height: 46px;
    font-size: 24px;
    color: white;
    background-color: #fa4657;
    border-radius: 23px;
    text-align: center;
    line-height: 46px;
    cursor: pointer;

.button:hover
    opacity: .8;


or

.button
    width: 160px;
    height: 46px;
    font-size: 24px;
    color: white;
    background-color: #fa4657;
    border-radius: 23px;
    cursor: pointer;
    outline: none;

.button:hover
    opacity: .8;

<div class="button">Go</div>

or

<button class="button">Go</button>

追问

大哥再问一下，这个按钮再加个别的颜色的边框要加什么代码？我加Border-color不行

追答

要设置边框的颜色，首先得要这个元素有边框，[ border-width: 1px; ]，再设置 [ border-color: #2c2c2c; ] 就有用了。
button元素 默认带边框宽度，直接设置[ border-color: #2c2c2c; ] 就有用了。

简单地做一下“回到顶部”按钮，用jQuery实现其隐藏和显示

1、首先，我们要准备HTML代码：

<div id="return-top">
     <a href="#top">返回顶部</a>
</div>

这里的<a>标签里面的href=“#top”就表示点击它就可以回到顶部，就不写回到顶部的代码了

2、设置其CSS样式：

#return-top{
     width: 50px;
     height: 50px;
     background-color: #8FBC8F;/*背景颜色*/
     color: white;/*字体颜色*/
     position: fixed;/*固定按钮的位置，不随页面滚动*/
     bottom: 40px;/*距离浏览器窗口底部的距离*/
     right: 40px;/*距离浏览器窗口最右侧的距离*/
     text-align: center;
　　　display:none;/*重点！我们打开页面时不需要看到这个按钮，设置为不显示*/
}
#return-top a{
　　color:white;
　　text-decoration:none;/*不要下划线*/
　　line-height:20px;/*行高*/
　　display:block;/*不使用这个属性的话，文字对不齐。。。具体原因我没了解过*/
　　margin:5px;/*元素四周的外边距为5像素，加上行高*2（因为有两行），刚好是50px(div的高)*/
}

一顿胡乱操作之后，“返回顶部”按钮就有了如下这个外观：，还怪好看的（不是

3、重点来了，jQuery代码部分：

<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
      $(window).scroll(function(){
           if($(this).scrollTop()>300){
                $("#return-top").show()
           }else{
                $("#return-top").hide()
           }
      })
</script>

 

解释一下：首先我们要做的功能是：用户打开网页，看不到按钮，滚动到了离页面顶端较远的地方，按钮自己出来了，点击按钮回到顶部，按钮又消失了

代码思路：当浏览器的滚动条靠近顶端的时候，“回到顶部”按钮始终隐藏（包括刚打开网页的时候，设置display:none），使用hide()方法；

　　　　　当滚动条位置有了变化，触发浏览器窗口的滚动事件（scroll()方法），当滚动条位置距离初始位置大于一定数值（像素值）时，按钮显示（show()方法）

提示：使用jQuery代码，要先引入js文件哦哦！

我是个编程小白，如果路过的网友有看了我写的内容很想打（指导）我的地方，可以告诉我啦啦啦^_^

题外话：想问下“^”这个符号你们怎么念的啊。。。。