正文

简单实用的纯css按钮效果

liangliang74  2022-02-07  375

关键词：

在许多网站中都需要实用到按钮，一个好看实用的css按钮即可以给访问者以美感，又可以方便开发者。下面就是一个纯css按钮，需要的可以参考。

css代码

.div {
    display: inline-block;
    padding: .3em .5em;
    background-image: linear-gradient(#ddd, #bbb);
    border: 1px solid rgba(0,0,0,.2);
    border-radius: .3em;
    box-shadow: 0 1px white inset;
    text-align: center;
    text-shadow: 0 1px 1px black;
    color:white;
    font-weight: bold;
}
.div:active{
    box-shadow: .05em .1em .2em rgba(0,0,0,.6) inset;
    border-color: rgba(0,0,0,.3);
    background: #bbb;
}

html代码

<div class="div">Button</div>

其他几种按钮

背景颜色

background-image: linear-gradient(#f5c153, #ea920d);

背景颜色

 background-image: linear-gradient(#8eb349, #5f7c22);

背景颜色

background-image: linear-gradient(#fbb2d0, #e779aa);

css简单的纯css下拉菜单(代码片段)

查看详情

css简单的纯css下拉菜单(代码片段)

查看详情

谁能提供一段按钮切换窗口的纯css代码？

如题，就像网易首页那样（如图），鼠标停留（或点击）那个按钮，就出来那个按钮所对应的内容。一定要纯CSS的，全部代码连在一起的，不要JS的。<head><title>无标题页</title><scripttype="text/javascript">functi... 查看详情

实用的回到顶部效果

...看到一个回到顶部按钮，但它是怎么做的呢？　　其实很简单,我们只需要将scrollTop的值置为0即可。但为了让回滚的效果更舒服，我们需要利用一点运动学的知识让页面滚动的速度由快变慢，例如speed=scrollTop/8。　　先给出布局... 查看详情

css页面效果实用

一.缺省三元素：超出部分用省略号表示overflow:hidden超出部分省略while-space:nowarp强制不换行text-overflow:ellipsis超出部分用省略号显示　　效果演示：二.页面中英文字母的大小写text-transform:capitalize字母以大写开头----重点间隔也... 查看详情

css3linear-gradient线性渐变实现虚线等简单实用图形

一、作为图片存在的CSS3gradient渐变我觉得CSS3Backgrounds比较厉害的一个地方就是支持多背景，也就是背景图片个数可以无限累加，正好CSS3的gradient渐变性质是background-image，于是，我们可以实现任意数量渐变背景图的叠加效果。甚... 查看详情

7.1万star！超实用，60多种动画效果的css库

【导语】：animate.css是一个有趣的，跨浏览器的CSS3动画库。简介animate.css是一个有趣的，跨浏览器的css3动画库，兼容性好，使用方便。它预设了抖动、闪烁、弹跳、翻转、旋转、淡入淡出等多达60多种动画效果，几乎包含了所有... 查看详情

超实用的音乐播放器插件(jquery+css)

...上搜索了大量的音乐播放器插件后,终于找到了一款上手简单,并且效果不错的插件,该音乐播放器插件是通过Jquery+Css实现的,下面就是全部代码,只要遵循下面的步骤,一定可以实现(文章末尾可查看效果图)一、目录结构二、导入jquery... 查看详情

超实用的音乐播放器插件(jquery+css)

css三级菜单效果

一个简单实用的css三级菜单效果<!doctypehtml><html><head><metacharset="utf-8"><title>css实现三级菜单</title><styletype="text/css">*{margin:0;padding:0}ul{list-style:none}a{text-de 查看详情

很实用的baguettebox.js图片弹出层

lightboxJS插件--baguetteBox.js，它是用纯Javascript创建的图像展示效果，拥有图像放大缩小并带有相应的CSS3过度，并能在触摸屏等设备上完美展示。baguetteBox.js优势javascript完成，不需要jQuery库支持支持触屏手机端支持显示标题和说明... 查看详情

11.简单的css按钮悬停特效(代码片段)

效果源码<!DOCTYPEhtml><html><head> <title>ButtonHoverEffects</title> <linkrel="stylesheet"type="text/css"href="style.css"></head><body> <ahref="#">< 查看详情

css3按钮鼠标悬浮光圈效果

...的，刚开始多记多练，但是到最后还是要自己深入专研，简单的入门是很快，但学好HTML是成为Web开发人员的基本条件。　　学习资源：　　HTMLDog(http://htmldog.com/)　　HTML入门指南(http://www.w3.org/MarkUp/Guide 查看详情

js简单实现“滚动到顶部“按钮悬浮效果，在一定高度才显示-替代css粘性定位position：sticky方案(代码片段)

效果图为什么不用sticky懒其实sticky很炫酷：一个很厉害的属性——sticky_高shan仰止的博客-CSDN博客JS实现-完整代码核心思路：js监测页面滚动高度，实时对比，通过addClass操作显示、隐藏DOM<!DOCTYPEhtml><htmllan... 查看详情

js简单实现“滚动到顶部“按钮悬浮效果，在一定高度才显示-替代css粘性定位position：sticky方案(代码片段)

简单实用的css边框属性border

...color边框的颜色案例举例为了更加通俗易懂，demo用的是最简单的dom元素和css属性<divclass="border"><divclass="border-left">商品介绍& 查看详情

简单实用的css边框属性border

...color边框的颜色案例举例为了更加通俗易懂，demo用的是最简单的dom元素和css属性<divclass="border"><divclass="border-left">商品介绍& 查看详情

c语言实现3d渐去文字效果！简单实用，源代码分享(代码片段)

原理把文本输出到IMAGE中，再使其在屏幕上滚动。在文字向上滚动的同时，相应地压缩每行的像素，并且改变每行的亮度，就实现了3D效果。效果源码////编译环境：VisualStudio2022|EasyX#include<easyx.h>#include<tim... 查看详情