洛丽糖 - 按钮
type: channel
link: https://luolt.cn/tag/%E6%8C%89%E9%92%AE/
items: typecho1.3.0关于编辑器页面自定义字段样式错位解决方案
items: typecho1.3.0关于文章编辑器按钮显示不全解决方法
items: 简洁的可变透明度返回顶部按钮
items: 扒自虎(基)绿(佬)林的艾特代码
items: css样式美化 button斜切角
items: WordPress侧边栏如何实现一图三按钮的效果
items: typecho向后台富文本编辑器添加自定义按钮
items: 纯CSS3制作的圆形修边渐变按钮动画特效源码

typecho1.3.0关于编辑器页面自定义字段样式错位解决方案
type: item
date: 2026-04-20T09:27:00+08:00
description: typecho1.3.0版本后台css样式出现了部分修改与不同，使用下面的方法即可解决自定义字段当中的描述信息间距问题。// 注册插件的方式，把下面的代码添加到functions.php文件中 Typecho_Plugin::factory('admin/write-post.php')->bottom = array('editora', 'reset'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('editora', 'reset'); // 重置编辑器按钮 class editora{ public static function reset() { echo ' '; } }

typecho1.3.0关于文章编辑器按钮显示不全解决方法
type: item
date: 2026-04-20T09:23:00+08:00
description: typecho1.3.0版本后台css样式出现了部分修改与不同，这就导致以前的旧主题多多少少会出现样式错乱问题。通过下面的方法至少可以让被遮挡的按钮显示完全，当然方法不止这一种。// 注册插件的方式，把下面的代码添加到functions.php文件中 Typecho_Plugin::factory('admin/write-post.php')->bottom = array('editor', 'reset'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('editor', 'reset'); // 重置编辑器按钮 class editor{ public static function reset() { echo ' '; } }

简洁的可变透明度返回顶部按钮
type: item
date: 2024-02-29T13:35:00+08:00
description: 可变透明度返回顶部代码，如果向下滚动超过1200像素，按钮的透明度会下降，减少视觉干扰，更便于浏览内容主体，非常贴心的用户体验，兼容主流浏览器js代码// JavaScript Document (function($){ var goToTopTime; $.fn.goToTop=function(options){ var opts = $.extend({},$.fn.goToTop.def,options); var $window=$(window); $body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix //$(this).hide(); var $this=$(this); clearTimeout(goToTopTime); goToTopTime=setTimeout(function(){ var controlLeft; if ($window.width() > opts.pageHeightJg * 2 + opts.pageWidth) { controlLeft = ($window.width() - opts.pageWidth) / 2 + opts.pageWidth + opts.pageWidthJg; }else{ controlLeft = $window.width()- opts.pageWidthJg-$this.width(); } var cssfixedsupport=$.browser.msie && parseFloat($.browser.version) < 7;//判断是否ie6 var controlTop=$window.height() - $this.height()-opts.pageHeightJg; controlTop=cssfixedsupport ? $window.scrollTop() + controlTop : controlTop; var shouldvisible=( $window.scrollTop() >= opts.startline )? true : false; if (shouldvisible){ $this.stop().show(); }else{ $this.stop().hide(); } $this.css({ position: cssfixedsupport ? 'absolute' : 'fixed', top: controlTop, left: controlLeft }); },30); $(this).click(function(event){ $body.stop().animate( { scrollTop: $(opts.targetObg).offset().top}, opts.duration); $(this).blur(); event.preventDefault(); event.stopPropagation(); }); }; $.fn.goToTop.def={ pageWidth:960,//页面宽度 pageWidthJg:2 ,//按钮和页面的间隔距离 pageHeightJg:100,//按钮和页面底部的间隔距离 startline:300,//出现回到顶部按钮的滚动条scrollTop距离 duration:500,//回到顶部的速度时间 targetObg:"html"//目标位置,用body太恶心了，回不到最上面去 }; })(jQuery); $(function(){ $('').appendTo("body"); });我在原来的css修改了一点点，各位可以在原来的代码中重新修改。.cd-top { z-index:9999; display: inline-block; border-radius: 3px; height: 38px; width: 38px; position: fixed; bottom: 40px; right: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); /* image replacement properties */ overflow: hidden; text-indent: 100%; white-space: nowrap; background: rgba(232, 98, 86, 0.8) url(https://yfch.top/img/top.png) no-r…

扒自虎(基)绿(佬)林的艾特代码
type: item
date: 2022-06-01T23:13:00+08:00
description: 一个代码是扒自虎绿林中的艾特功能，其实简单的修改就可以实现其它快捷功能。html快捷功能按钮事件绑定 @Ta js代码

css样式美化 button斜切角
type: item
date: 2022-02-12T07:58:00+08:00
description: CSS代码.rantangle { width:100%; box-sizing:border-box; text-align:center; } .rantangle button { width:20%; border:0; border-radius:5px; color:#FFF; padding:10px 0; text-align:center; text-decoration:none; cursor:pointer; } .btnleft { background:linear-gradient(-59deg,transparent 21px,#d12826 0) top right; background-size:100% 100%; background-repeat:no-repeat; } .btnright { background:linear-gradient(120deg,transparent 21px,#04A95B 0) top left; background-size:100% 100%; background-repeat:no-repeat; margin-left:-25px; } html代码 按钮1 按钮2 截图

WordPress侧边栏如何实现一图三按钮的效果
type: item
date: 2021-09-21T13:20:00+08:00
description: 可能有的人不太明白什么是一图三按钮的效果，其实就是在侧边栏某一个文本工具中显示有一张图片和三个链接按钮，具体效果看下图一图三按钮效果，或见下图所示：其实这个一图三按钮效果，一般人还真用不到，所以我就没有整合到Nana主题中，但是一直都有博主来问如何实现。虽然每次都说这个是比较简单的代码，直接浏览器中查看元素复制相应的 HTML 代码及 CSS 代码即可，但是还是有很多人不太懂得如何下手去折腾，所以今天就特意把它写成教程，以便让更多喜欢这个效果的博主们能够用上它。侧边栏实现一图三按钮效果步骤1、将以下 CSS 代码添加到所使用主题的 style.css 文件中#update_version img{margin:5px 0 15px} #update_version a{width:30%;height:35px;border-radius:3px;text-align:center;line-height:35px;font-size:9pt;color:#fff} .blog_link{background-color:#2ba9fa} .blog_link,.cms_link{float:left;margin-right:5%} .cms_link{background-color:#ff6969} .grid_link{float:left;background-color:#70c041} 2、登录站点后台 >> 外观 >> 小工具 >> 将『文本』或html代码 小工具添加到指定侧边栏中。3、接着输入标题（可选，可不输入），并将文本小工具编辑框切换到文本格式，然后将以下代码添加进去并保存即可。代码如下： 发送邮件网址导航关于我们 点击在线投稿 投稿邮箱：123456@qq.com 交流 QQ：123456 说明：其他代码不用修改，只需将代码中的链接名称及链接地址等内容修改成自己想要的名称及地址即可。玩转网已经根据以上教程在侧边栏实现了一图三按钮的效果，具体效果请移步玩转网首页侧边栏这个一图三按钮的效果，不单单适用于 WordPress，也适用于 zblogPHP 站点的侧边栏，更是适用于其他程序所见的站点侧边栏。当然，如果添加到不到侧边栏的地方应该也是可以，具体效果请自行测试和修改。

typecho向后台富文本编辑器添加自定义按钮
type: item
date: 2021-07-05T11:24:00+08:00
description: 把下面的代码复制粘贴到typecho相关主题模板下面的functions.php文件中即可(代码取自名为“simplifier”的一款主题模板)Typecho_Plugin::factory('admin/write-post.php')->bottom = array('editor', 'reset'); Typecho_Plugin::factory('admin/write-page.php')->bottom = array('editor', 'reset'); class editor { public static function reset() { Typecho_Widget::widget('Widget_Options')->to($options); ?> <?php } } ?>

纯CSS3制作的圆形修边渐变按钮动画特效源码
type: item
date: 2021-06-16T22:32:53+08:00
description: 纯CSS3制作的圆形修边渐变按钮动画特效源码html代码 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 查看更多 Click!查看更多 查看更多 查看更多 查看更多 查看更多 CSS样式body { background: #e0e5ec; } h1 { position: relative; text-align: center; color: #353535; font-size: 50px; font-family: "Cormorant Garamond", serif; } p { font-family: 'Lato', sans-serif; font-weight: 300; text-align: center; font-size: 18px; color: #676767; } .frame { width: 90%; margin: 40px auto; text-align: center; } button { margin: 20px; } .custom-btn { width: 130px; height: 40px; color: #fff; border-radius: 50px; padding: 10px 25px; font-family: 'Lato', sans-serif; font-weight: 500; font-size: 16px; background: transparent; cursor: pointer; transition: all 0.3s ease; position: relative; display: inline-block; box-shadow: inset 2px 2px 2px 0px rgba(255,255,255,.5), inset -7px -7px 10px 0px rgba(0,0,0,.1),7px 7px 20px 0px rgba(0,0,0,.1), 4px 4px 5px 0px rgba(0,0,0,.1); text-shadow: 2px 2px 3px rgba(255,255,255,.5), -4px -4px 6px rgba(116, 125, 136, .2); outline: none; } /* 1 */ .btn-1 { color: rgba(0,3,255,.5); background-color: #b2d8ff; border: none; } .btn-1:hover { color: rgba(0,3,255, .7); background: linear-gradient(0deg, rgba(0,3,255,.5) 0%, rgba(2,126,251,.5) 100%); } /* 2 */ .btn-2 { background-color: #e8d1ff; color: rgba(96,9,240, .5); border: none; } .btn-2:before { height: 0%; width: 2px; } .btn-2:hover { box-shadow: 4px 4px 6px 0 rgba(255,255,255,.5), -4px -4px 6px 0 rgba(116, 125, 136, .5), inset -4px -4px 6px 0 rgba(255,255,255,.2), inset 4px 4px 6px 0 rgba(0, 0, 0, .2); } /* 3 */ .btn-3 { color: rgba(2,126,251,1); background: rgba(118,174,241,1); width: 130px; height: 40px; line-height: 42px; padding: 0; border: none; } .btn-3 span { position: relative; display: block; width: 100%; height: 100%; } .btn-3:before, .btn-3:after { position: absolute; content: ""; right: 0; top: 0; background: rgba(2,126,251,1); transition: all 0.3s ease; } .btn-3:before { height: 0%; width: 2px; } .btn-3:after { width: 0%; height: 2px; } .btn-3:hov…