CSS打造炫酷的登陆按钮(附源码)

登录页之按钮特效纯Css 登录页面Html + css 阅读详情

CSS打造炫酷的登陆按钮,废话不多说直接看效果吧。喜欢的朋友可以直接拿去用!

源码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			<link rel="stylesheet" type="text/css" href="css/btn1.css">
		</style>
	</head>
	<body>
		<div id="wrap">
			<a href="#" class="btn-slide">
			  <span class="circle"><i class="fa fa-rocket"></i></span>
			  <span class="title">火箭</span>
			  <span class="title-hover">带你飞</span>
			</a>
			<a href="#" class="btn-slide2">
			  <span class="circle2"><i class="fa fa-download"></i></span>
			  <span class="title2">登陆</span> 
			  <span class="title-hover2">点击登陆</span>
			</a>
		</div>
	</body>
</html>

 最关键的CSS部分:

#wrap {
    margin: 20px auto;
    text-align: center;
}

#wrap br {
    display: none;
}

.btn-slide, .btn-slide2 {
    position: relative;
    display: inline-block;
    height: 50px;
    width: 200px;
    line-height: 50px;
    padding: 0;
    border-radius: 50px;
    background: #fdfdfd;
    border: 2px solid #0099cc;
    margin: 10px;
    transition: .5s;
}

.btn-slide2 {
    border: 2px solid #efa666;
}

.btn-slide:hover {
    background-color: #0099cc;
}

.btn-slide2:hover {
    background-color: #efa666;
}

.btn-slide:hover span.circle, .btn-slide2:hover span.circle2 {
    right: 100%;
    margin-right: -45px;
    background-color: #fdfdfd;
    color: #0099cc;
}

.btn-slide2:hover span.circle2 {
    color: #efa666;
}

.btn-slide:hover span.title, .btn-slide2:hover span.title2 {
    right: 40px;
    opacity: 0;
}

.btn-slide:hover span.title-hover, .btn-slide2:hover span.title-hover2 {
    opacity: 1;
    right: 40px;
}

.btn-slide span.circle, .btn-slide2 span.circle2 {
    display: block;
    background-color: #0099cc;
    color: #fff;
    position: absolute;
    float: right;
    margin: 5px;
    line-height: 42px;
    height: 40px;
    width: 40px;
    top: 0;
    right: 0;
    transition: .5s;
    border-radius: 50%;
}

.btn-slide2 span.circle2 {
    background-color: #efa666;
}

.btn-slide span.title,
  .btn-slide span.title-hover, .btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    position: absolute;
    right: 90px;
    text-align: center;
    margin: 0 auto;
    font-size: 16px;
    font-weight: bold;
    color: #30abd5;
    transition: .5s;
}

.btn-slide2 span.title2,
  .btn-slide2 span.title-hover2 {
    color: #efa666;
    right: 80px;
  }

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    right: 80px;
    opacity: 0;
}

.btn-slide span.title-hover, .btn-slide2 span.title-hover2 {
    color: #fff;
}

 

JavaFX实战:5分钟打造一个现代化登录界面 本文将带您从零开始,使用JavaFX快速构建一个现代化、美观实用的登录界面。整个过程只需5分钟,最后会提供完整源码供您参考使用。 阅读详情

相关推荐

web期末作业网页设计——沪上美食大搜罗网站(附完整源码)

"沪上美食大搜罗"是一个展示上海美食文化的静态网站,采用HTML+CSS+JavaScript技术栈开发。项目包含9个页面,采用模块化设计,主要功能包括:导航菜单(含下拉子菜单)、用户登录/注册、美食内容图文视频展示、新闻列表、留言板等。亮点是清晰的页面布局、统一的设计风格,以及整合Flash动画、视频等多媒体元素增强用户体验。项目结构组织合理,源代码可通过网盘获取。

2503_91057718的博客 355

html <a>链接按钮中<span class="sr-only">(current)</span>的作用

<li class="active"> <a href="#">首页 <span class="sr-only">(current)</span></a></li>这是专门为残障人士浏览网页设计的。 在前端开发中,有些时候设计图上面会出现仅供正常视觉用户看的元素。比如:导航栏菜单当前页面选中高亮状态,这些...

qq_44379844的博客 5718

易语言源码易语言炫酷方向按钮源码.rar

易语言源码易语言炫酷方向按钮源码.rar 易语言源码易语言炫酷方向按钮源码.rar 易语言源码易语言炫酷方向按钮源码.rar 易语言源码易语言炫酷方向按钮源码.rar 易语言源码易语言炫酷方向按钮源码.rar 易语言源码易语言炫酷方向按钮源码.rar易语言源码易语言炫酷方向按钮源码.rar 易语言源码易语言炫酷方向按钮源码.rar

一个简单的登录页面

第一次写博客~哈哈,前端学很久了,最近在做一个课堂投票系统,功能是教师发布二维码,课堂上的学生扫描二维码后进入答题页面进行答题,以此来进行老师的授课质量的检测。平台涉及的主要有教师的登录和添加题目,生成试卷和二维码。先来介绍一下登录界面,用到的主要有html、css、jQuery,也使用了bootstrap中的两个icon。

Sweetie_Lumia的博客 2868

CSS3 登录表单 个性化登录按钮

这是一款基于jQuery和CSS3的登录表单,登录表单的界面整体呈现扁平化风格,非常简洁和清新。当焦点在表单的输入字段上时,表单提示文字会出现一个小动画,同时这款CSS3登录表单的最大特点是其个性化的登录按钮,鼠标滑过也有不错的效果。

MCP4728 电路及stm32F103程序移植

写在前面 通过优快云查到一些MCP4728 的程序,结合程序及datasheet对于驱动的描述,理清了思路 感谢开路者! MCP4728的电路比较简单,见下文描述 应用电路 datasheet: 实际测试电路: SCL接stm32的PB10,SDA接PB11 RDY/BSY引脚和LDCA引脚,悬空 解释见截图: MCP4728地址 选择任意输出通道写入DAC输入寄存器 应用程序 int mcp4728_write_all_channel(float vol1, float vol2, fl

u013074298的专栏 5427

html&css_登录网页案例

1.成果图 2.分析图: 3.html代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/sty.css"/> </head> <body> <!--1.头部分start--> &l

gulanga5的博客 551

数学建模美赛O奖论文研读启示录——从模仿开始

数学建模美赛O奖论文哪些地方比较出彩?我们可以从中学到什么东西?可以从哪些地方进行模仿?我总结了一些O奖论文里我认为比较好的地方,跟大家一起学习交流!

小宇的修炼之路 5429

入门css小demo,登录按钮

【代码】入门css小demo,登录按钮。

weixin_59525879的博客 260

循环卷积和线性卷积(矩阵视角)

矩阵视角的循环卷积核线性卷积

shengsong 3578

ESP32学习,驱动LED点阵屏,SD卡播放GIF动图

搬运就可以实现效果,如果有不足,请批评指正。下步该学一下如何文章上视频了,老是截图不方便展示效果。

u011625956的博客 1868

推荐使用:Landwind - 基于Tailwind CSS的登陆页面模板

推荐使用:Landwind - 基于Tailwind CSS的登陆页面模板 1、项目介绍 Landwind 是一个免费且开源的SaaS和产品网站着陆页模板,由 Themesberg 团队匠心打造。它利用了功能强大的Tailwind CSS 实用优先框架以及 Flowbite 组件库,设计出包括英雄区、客户Logo展示、特色板块、评价、价格卡片、FAQ、预尾部CTA按钮和底部导航等丰富元素。 2、...

gitblog_00086的博客 655

HFSS仿真中如何提取最大E/H场强与频率关系曲线

本文详细讲解了在HFSS仿真中提取最大E/H场强与频率关系曲线的完整流程。通过使用场计算器(Field Calculator)和创建场报告,工程师可以准确获得器件在整个频带内的电场或磁场强度峰值,并进一步推导出关键的功率容量曲线,为高功率射频器件(如滤波器、耦合器)的设计提供至关重要的安全评估依据。

ss78901的博客 1099

前端小白也能快速学会的博客园博客美化全攻略[附源码]

前端小白也能快速学会的博客园博客美化全攻略 文章目录前端小白也能快速学会的博客园博客美化全攻略美化方法论简介准备工作js权限申请如何模仿一个博客园的自定义风格(样式css+动态效果js)?markdown样式自定义在页面顶部添加&amp;quot;自定义搜索&amp;quot;功能在页面顶部添加&amp;quot;音乐播放器&amp;quot;(Flash)播放背景音乐在页面顶部添加&amp;quot;Fork me on Github&amp;quot;图

极客学长Bravo | 突破信息差 | 副业生财有术 3674

进阶篇第8节:寄存器压力——寄存器溢出对性能的影响及优化

**摘要:GPU寄存器是最快的存储单元(1周期访问),但数量有限。过高的寄存器使用会导致溢出(变量存入慢速本地内存)或降低占用率(减少并发线程数),严重影响性能。优化方法包括复用变量、使用共享内存替代寄存器数组、限制寄存器数量(--maxrregcount)等。实际测试显示,将寄存器使用从48个降至24个可使性能提升37%。分析工具如Nsight Compute可帮助检测寄存器压力。面试常见问题涉及寄存器溢出的检测与优化策略。

PeterPan的博客 95

【SystemVerilog基础】SystemVerilog Assertion 概述

断言主要是描述复杂的设计行为;是传统验证方法学一个很好的补充,可以检查到电路内部细节,相当于一种白盒验证,传统的验证方法学是纯粹的黑盒验证!property跟上面的sequence差别不大,唯一有差别可能多了两个implication(|->,|=>)注意,当有前置条件时,不满足前置条件不会fail,而是伪真!上面这个因为没有前置条件,每个周期都会去检查!注意:当没有前置条件时,不满足条件会直接fail!

MoorePlus的博客 333

web前端的十种jquery特效及源码下载

1.纯CSS3实现自定义Tooltip边框 涂鸦风格 这是一款用纯CSS3打造的自定义Tooltip边框的应用,之前我们讨论过如何用CSS3来实现不同样式的Tooltip,今天的这款Tooltip却可以用CSS3来自定义边框,边框呈涂鸦风格。用CSS3实现自定义边框的好处是可以自适应边框内部的文字数量大小。 在线演示 源码下载 2.jQuery矢量SVG地图插件JVectorMap

爱前端网 1043

ImportError: cannot import name ‘is_torch_npu_available‘ from ‘transformers.utils‘解决方案

本文主要介绍了ImportError: cannot import name ‘is_torch_npu_available’ from 'transformers.utils’解决方案,希望能对使用transformers的同学们有所帮助。 文章目录 1. 问题描述 2. 解决方案

weixin_43178406的博客 4万+

拒绝臃肿:我为什么坚持用 Vue 3 + 原生 CSS 构建企业级后台系统

拒绝“配置工程师”思维!本文深入复盘了一个零依赖的 HRMS 企业级前端架构。不引入 Element Plus 和 Tailwind,仅依靠 Vue 3 Composition API 和原生 CSS 变量构建由简入繁的设计系统;不使用 vue-i18n,仅用 30 行代码手写响应式国际化核心。文章包含完整的 RBAC 权限控制流程图与源码解析,适合想要摆脱组件库依赖、探究 Vue 底层原理的进阶开发者阅读。

2201_75376519的博客 947

visio安装包

Microsoft Office Visio 是一款专业的制图软件。利用经过更新的形状、协作工具和数据链接图表,创建专业级图表以简化复杂的信息。

蓝牙模块HM-10手册

蓝牙模块HM-10手册,该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

PyCharm实战:手把手教你用Flask打造登录界面(从环境搭建到安全部署的完整开发保姆教程 | 附源码)

记录一下我使用Flask写登陆界面的过程,登陆界面用来做毕设滴,希望能对看到的人有帮助。超级保姆级教程编译器:Pyharm。

weixin_66321657的博客 2100

SAP B1中文培訓教材_SDK

公司内部培训资料,对开发工具 ,DIAPI, UIAPI,Add-ON有详细解说

OneAPI详细步骤:自定义登录页CSS样式、多语言切换与移动端适配优化

本文介绍了如何在星图GPU平台上自动化部署OneAPI镜像——一个通过标准OpenAI API格式统一接入所有大模型的开箱即用网关。用户可快速配置多语言支持、移动端适配与登录页定制,典型应用于企业级AI服务中枢建设,实现模型调用的统一管理、安全管控与全球化协作。

weixin_29025501的博客 375

深度学习工具包 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 form 居中_Html制作简单而漂亮的登录页面

这篇文章主要为大家详细介绍了Html制作简单而漂亮的登录页面具体代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下先来看看样子。html源码:XML/HTML Code复制内容到剪贴板<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title...

weixin_39588223的博客 827

【课程设计】网约车管理系统-计算机毕业设计源码56984

1.用户和司机要做注册和登录模块,管理员只用做登录模块 2.订单分为预约订单和实时下单,可以从同一个窗口进入,然后准备下单时可以选择预约订单或者实时下单 3.下单时能够通过出发地到目的地的距离自动计算出所需费用,可以调用百度地图api或其他地图api 4.订单支付的时候要体现积分的作用,譬如用一定的积分抵扣费用,积分由管理员进行管理 在订单完成后根据用户的消费情况或信用给予积分赠送 5.历史订单,至少需要体现用户,司机,费用,里程,下单时间,预约订单还是实时下单, 然后最好能从历史订单跳转到评价和投诉界面

Biye_Design的博客 894
上一篇: C语言数据类型
下一篇: C语言中putchar()和getchar()用法
bingoCoder
博客等级 码龄10年 1400粉丝 157原创
评论 2
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值