css按钮按下改按钮颜色_构建踢屁股实用CSS3按钮

css按钮按下改按钮颜色

曾经需要的背景图像和图标现在可以使用普通CSS创建。 因为现代浏览器可以访问诸如框阴影,渐变,圆角,文本阴影和字体等内容,所以我们最终可以在创建视觉元素(例如按钮)时利用此优势并消除对图像的任何需求!


全屏播


最终密码

<!DOCTYPE html> 
 
<html lang="en"> 
<head> 
	<meta charset="utf-8"> 
	<title>CSS3 Buttons</title> 
	<style> 
 
	/* CUSTOM FONT */ 
	@font-face { 
		font-family: 'EfonRegular'; 
		src: url('font/EFON-webfont.eot'); 
		src: local('EfonRegular'), url('font/EFON-webfont.woff') format('woff'), url('font/EFON-webfont.ttf') format('truetype'), url('font/EFON-webfont.svg#webfont') format('svg'); 
		font-weight: normal; 
		font-style: normal; 
	}	 
 
	body { 
	 width: 400px; 
	 margin: 200px auto; 
	 background: #666; 
	} 
 
	.button { 
	 width: 400px; 
	 height: 100px; 
	 line-height: 100px; 
	 color: white; 
	 text-decoration: none; 
	 font-size: 50px; 
	 font-family: helvetica, arial; 
	 font-weight: bold; 
	 display: block; 
	 text-align: center; 
	 position: relative; 
 
	 /* BACKGROUND GRADIENTS */ 
	 background: #014464; 
	 background: -moz-linear-gradient(top, #0D658E, #0C577A 50%, #014D71 51%, #003E5C); 
	 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0E658E), color-stop(.5, #0C577A), color-stop(.5, #014D71), to(#003E5C));  
 
	 /* BORDER RADIUS */ 
	 -moz-border-radius: 10px; 
	 -webkit-border-radius: 10px; 
	 border-radius: 10px; 
 
	 border: 1px solid #368DBE; 
	 border-top: 1px solid #c3d6df; 
 
	 /* TEXT SHADOW */ 
 
	 text-shadow: 1px 1px 1px black; 
 
	 /* BOX SHADOW */ 
	 -moz-box-shadow: 0 1px 3px black; 
	 -webkit-box-shadow: 0 1px 3px black; 
	 box-shadow: 0 1px 3px black; 
	} 
 
	/* WHILE HOVERED */ 
	.button:hover { 
		background: #014464; 
	 	background: -moz-linear-gradient(top, #0c5f85, #0b5273 50%, #024869 51%, #003853); 
	 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0c5f85), color-stop(.5, #0b5273), color-stop(.51, #024869), to(#003853)); 
	} 
 
	/* WHILE BEING CLICKED */ 
	.button:active { 
		-moz-box-shadow: 0 2px 6px black; 
		-webkit-box-shadow: 0 2px 6px black; 
	} 
	/* FONT GLYPH (MOSTLY FOR FUN) */ 
	.button:before { 
		font-family: EfonRegular; 
		content: 'v'; 
		color: #09232F; 
		font-size: 90px; 
		float: left; 
		margin-left: 35px; 
		margin-right: -10px; 
		text-shadow: 0 1px 0 #4190AF; 
	} 
 
	</style> 
</head> 
<body> 
     <a href="#" class="button"> Follow Me </a> 
 
</body> 
</html>

结论

事实是,对Twitter-bird图标使用微小的图像可能会更聪明。 但是,目标是使用所有CSS达到这种效果! 你怎么看?

翻译自: https://code.tutsplus.com/tutorials/build-kick-ass-practical-css3-buttons--net-11702

css按钮按下改按钮颜色

一组漂亮的css3按钮(各种颜色+样式) 纯css3,不支持ie8以下浏览器 立即下载

相关推荐

6种Web前端多彩的按钮(一)

6种Web前端多彩的按钮(一)

css按钮按下改按钮颜色_现代CSS按钮基础知识简介

css按钮按下改按钮颜色Update (9th July 2016): This article has been updated to include <button> tags rather than anchor tags to meet modern accessibility best practices. If you are working with buttons, a...

culi3182的博客 6058

css3 按钮简单10种颜色线性渐变web buttons网页按钮

css3 按钮简单10种颜色线性渐变web buttons网页按钮 css3 按钮简单10种颜色线性渐变web buttons网页按钮

每日作业-Web APIs第07天

文章目录一、tab栏切换二、5s跳转 一、tab栏切换 ​ 1.点击界面中按钮,将当前被点击的按钮的背景颜色变为gold色,其他的按钮恢复默认。 ​ 2、当点击按钮的时候,需要将这个按钮对应位置的div显示出来 提示 1.让按钮背景颜色变为gold色只需要给按钮的class增加active即可 2.让div显示出来,只需要将div的class增加current即可 3.如何利用自定义属性降按钮与下方盒子建立联系 <!DOCTYPE html> <html lang="e

Qiuxuntao的博客 735

DEMATEL-ISM模型的Python实现——方法介绍以及代码复现

本文参考文献与网络资料,对DEMATEL-ISM方法做了介绍何步骤描述,并给出Python代码进行了计算和绘图。

cros1的博客 2万+

在Keil下完成一个汇编程序的编写

在学习STM32的路上开始是学的C语言尚未进行对汇编进行学习,因此抽出时间来学习一下在keil下的汇编语言。

Liu-FE的博客 1万+

Web App开发----按钮

mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景,分别为primary、success、warning、danger、royal;使用.mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮,例如:通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮。 1.普通按钮 在button节点上增加...

m0_58760840的博客 2381

Python爬虫实战:5分钟搞定大众点评评论数据抓取(附完整代码)

本文详细介绍了使用Python爬虫高效获取大众点评评论数据的5个关键技巧,包括环境配置、智能页面解析、反反爬策略、数据存储与容错设计以及性能优化。通过实战案例和完整代码,帮助开发者快速掌握文本挖掘技术,适用于市场分析和商业决策。

weixin_30660027的博客 290

操作元素之修改样式属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..

leechoy 1109

基于YOLOv10的建筑图纸物体检测系统:从数据集构建到UI界面实现

高度结构化的图形元素标准化的符号和标注系统多层次的细节表达精确的尺寸和位置关系。

YOLO 390

独家开源|RK3588 平台 YOLOv5 Android 源码级解析:NPU 量化、多线程与目标跟踪实战

本文将带你完成一个完整的AI视觉项目:在搭载RK3588芯片的Android开发板上运行实时目标检测与跟踪应用。实战目标:成功运行官方YOLOV5摄像头实时检测案例技术深度:深入理解RKNN开发框架和源码实现核心技能:掌握NPU推理、多线程并发、目标跟踪等关键技术。

m0_71589036的博客 193

移动端CSS 1px边框问题:从物理像素到视觉像素的终极解决方案

在移动端开发中,CSS像素与设备物理像素的差异是前端工程师必须理解的核心概念。设备像素比(DPR)的引入,使得一个CSS逻辑像素可能对应多个物理像素,这直接导致了在高清屏上1px边框渲染过粗、模糊的视觉问题。这一现象不仅影响UI的精致度,更关乎用户体验的一致性。从技术原理上看,这涉及视口模型、浏览器渲染机制及亚像素渲染等底层知识。为解决此问题,业界衍生出多种工程实践方案,例如利用伪元素结合transform: scale()进行缩放,或使用background-gradient绘制细线。其中,transfo

weixin_33980459的博客 543

Qt实现思维导图功能5『纵向分布模式』

思维导图纵向分布模式:模式一

浮生流年的博客 1057

商业的10个最佳Android应用程序模板

您是否打算构建适用于Android的商务应用程序,但希望减少一些繁琐的编码工作,而将精力集中在使应用程序与众不同的更有趣的工作上? 借助高级Android业务应用模板,您可以制作可以针对特定客户的需求进行自定义或配置的独特应用。 它们具有许多功能,包括通过广告和应用内购买从中获利的功能。 CodeCanyon上2020年最畅销的Business Android应用模板 抓住这些商业...

代码教主 1352

【FDTD】仿真目录(共计 16 篇)

对于完美吸收型边界条件,有时候我们需要设置将仿真结构穿过边界条件区域,具体原因可以阅读下文。在进行 S 参数扫描时,当考虑到材料的色散特性时,我们可以如下文一样选择计算群延迟。仿真,我们需要构建仿真结构与仿真区域,对于它们的尺寸,应该遵循下文进行设定。中存在多种不同的网格类型,具体可以参考下文,这部分内容仅作了解即可。尺寸的设置问题,对于 mesh 的最小尺寸,可以参考下文。的边界条件设置也十分重要,下文中我们对边界条件进行总结。仿真中我们可以设定参与仿真的模式数量,可以参考下文。尺寸的实例,详见下文。

u011699626的博客 504

基于FPGA的AGC自适应增益控制系统开发

自动增益控制(AGC)是一种在接收信号过程中自动调整放大器增益的技术,以确保输出信号的幅度保持在一个恒定的水平。基于FPGA实现AGC系统具有高性能、低延迟和高度可配置的特点,广泛应用于无线通信、音频处理和雷达等领域。FPGA上的AGC系统提供了一种高效且灵活的方法来处理变化的信号环境。在实际应用中,通过合理的设计和优化,可以显著提高信号处理系统的鲁棒性和可靠性。

走向CTO的路上... 1696

花颜研究所 · 美妆电商:基于HarmonyOS ArkTS API 24移动端美妆零售应用深度解析,ArkTS声明式UI + @Observed数据模型 + @Builder组件封装的经典架构模式

健身管理类应用与之前分析的外卖、招聘等应用有本质差异——它的核心数据不是"交易"或"任务",而是"时间序列的身体状态数据":每次训练有时长、卡路里、组数、重量;每次饮食有热量、蛋白质、碳水、脂肪;每周有运动时长趋势图。这些数据的共同特征是"随时间积累,用户需要横向对比和趋势分析"。这导致健身App的数据层设计必须从第一天就考虑"历史数据查询"和"多维度聚合"的需求,而非仅关注当前单条记录的增删改查。健身应用的用户行为模式也有独特之处:用户使用健身App的目标是"坚持",而不是"一次性完成任务"。这意味着激励

jin123322的博客 271

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

Web中按下鼠标按钮颜色改变放开鼠标颜色恢复的方法

方法一: 直接在html中为元素添加onmousedown和onmouseup事件,在JavaScript中写函数 button    function mouseDown(e) {   e.style="background-color:black"; } function mouseUp(e) {  e.style="background-color:

远走的兔子博客 6517

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

Camera2Demo

在Camera2 的基础上进行封装,使得Camera2一堆初始化逻辑与Activity分离,降低耦合度,完成预览拍照并保存的操作

css按钮按下改按钮颜色_20个新鲜多彩CSS3按钮

css按钮按下改按钮颜色Here is the result of an experiment with fonts and css3 properties like text-shadow and box-shadow: 这是使用字体和css3属性(例如text-shadow和box-shadow)进行实验的结果: Click on this image to see a DEMO 点击此图片查...

culiao9310的博客 1681

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain&#39;s apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath(&#39;DeepLearnToolbox&#39;));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand(&#39;state&#39;,0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W&#39;); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand(&#39;state&#39;,0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = &#39;sigm&#39;;%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, &#39;Too big error&#39;);```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand(&#39;state&#39;,0)sae = saesetup([784 100]);sae.ae{1}.activation_function = &#39;sigm&#39;;sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)&#39;)% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;;nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, &#39;Too big error&#39;);```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x&#39;,28,28,60000))/255;test_x = double(reshape(test_x&#39;,28,28,10000))/255;train_y = double(train_y&#39;);test_y = double(test_y&#39;);%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you&#39;ll get around 1.2% errorrand(&#39;state&#39;,0)cnn.layers = { struct(&#39;type&#39;, &#39;i&#39;) %input layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 6, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %sub sampling layer struct(&#39;type&#39;, &#39;c&#39;, &#39;outputmaps&#39;, 12, &#39;kernelsize&#39;, 5) %convolution layer struct(&#39;type&#39;, &#39;s&#39;, &#39;scale&#39;, 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, &#39;Too big error&#39;);```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, &#39;Too big error&#39;);%% ex2 neural net with L2 weight decayrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex3 neural net with dropoutrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex4 neural net with sigmoid activation functionrand(&#39;state&#39;,0)nn = nnsetup([784 100 10]);nn.activation_function = &#39;sigm&#39;; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex5 plotting functionalityrand(&#39;state&#39;,0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = &#39;softmax&#39;; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand(&#39;state&#39;,0)nn = nnsetup([784 20 10]); nn.output = &#39;softmax&#39;; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, &#39;Too big error&#39;);```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

html如何设置一个纯色按钮,运用比较纯的CSS打造很Web2.0的按钮

先上图,所谓有图有真相。如果您觉得图片上这些按钮不够2.0,那没办法,请回避吧!从图片中,我们可以看到,我们要解决如下几个问题:背景色渐变圆角框阴影效果就目前而言,要实现如上的效果,我们可以通过使用PNG图片来实现,但熟悉的人都知道,要做出这样的效果来,还是需要花费很多的经力的。更何况还要画出这么多种配色(感谢一下辛苦的前台工程师们)。接下来,就让我们看下使用CSS(主要是CSS3)怎么来做吧。一...

weixin_42129113的博客 742

html,button的背景色和文字颜色

新建 background-color表示背景色 color表示文字的颜色

Top5软件工程硕士,先后在京东、字节从事多年Java后端开发、实时和离线大数据开发 12万+

web前端:按钮转化变色,阴影box-shadow使用,动画属性transform:translate(-x,-y)居中样式

1.less * { margin: 0; padding: 0; body { a { //a标签不可以设置宽高,需要display:inline-block display: inline-block; //未知宽高下居中使用trnasform:translate(x,y) width: 100px; height: 30px;

cevent的博客 437

CSS 盒子模型与背景渐变、文字渐变实战

content(内容区):文字、图片等实际内容占据的区域padding(内边距):内容与边框之间的空白border(边框):盒子的边界margin(外边距):盒子与其他盒子之间的间距fill:#333;important;important;fill:none;color:#333;color:#333;important;fill:none;fill:#333;height:1em;margin 外边距border 边框padding 内边距content 内容区。

2601_96876853的博客 240
上一篇: less 技巧_使用LESS的实用技巧
下一篇: html表单css设计_使用CSS 3设计更漂亮的Web表单
daique1908
博客等级 码龄10年 29粉丝 0原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值