css中创建按钮,如何使用CSS创建这些按钮？

怼烎@ 2022-09-02 14:55 210阅读 0赞

您需要添加渐变和边境raduius

.button \{

\-moz-box-shadow:inset 0px 1px 0px 0px \#7af013;

\-webkit-box-shadow:inset 0px 1px 0px 0px \#7af013;

box-shadow:inset 0px 1px 0px 0px \#7af013;

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, \#77d42a), color-stop(1, \#5cb811));

background:-moz-linear-gradient(center top, \#77d42a 5%, \#5cb811 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='\#77d42a', endColorstr='\#5cb811');

background-color:\#77d42a;

\-moz-border-radius:20px;

\-webkit-border-radius:20px;

border-radius:20px;

border:3px solid \#268a16;

display:inline-block;

color:\#ffffff;

font-family:arial;

font-size:15px;

font-weight:bold;

padding:13px 22px;

text-decoration:none;

\}.classname:hover \{

background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, \#5cb811), color-stop(1, \#77d42a));

background:-moz-linear-gradient(center top, \#5cb811 5%, \#77d42a 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='\#5cb811', endColorstr='\#77d42a');

background-color:\#5cb811;

\}.classname:active \{

position:relative;

top:1px;

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，210人围观）

还没有评论，来说两句吧...

相关阅读

相关开始使用 CSS 按钮悬停效果

开始使用 CSS 按钮悬停效果 ![在这里插入图片描述][eff0bc8b0eb247d797a70870d980d7ec.gif_pic_center] HTML 代码

系统管理员/ 2023年10月14日 14:30/ 0 赞/ 62 阅读

相关如何使用加载器创建发送按钮

有关如何使用加载程序创建发送按钮的分步指南。 ![在这里插入图片描述][9fa3b7f503f5470f9baab66dbc1f6700.png] 超文本标记语言

阳光穿透心脏的1/2处/ 2023年10月13日 13:31/ 0 赞/ 28 阅读

相关浮动举报按钮html,Css浮动按钮

css body \{ margin: 0; height: 100vh; display: flex; justify-content: center; alig

川长思鸟来/ 2022年10月07日 04:45/ 0 赞/ 254 阅读

相关如何创建按钮CButton

CButton::Create BOOL Create( LPCTSTR lpszCaption, DWORD dwStyle, const RECT&

小鱼儿/ 2022年09月17日 06:18/ 0 赞/ 204 阅读

相关 html5如何创建按钮button

HTML 5 <button> 标签定义和用法 <button> 标签定义按钮。您可以在 button 元素中放置内容，比如文档或图像。这是该元素与由 input

╰半橙微兮°/ 2022年09月17日 05:27/ 0 赞/ 396 阅读

相关 css中创建按钮,如何使用CSS创建这些按钮？

您需要添加渐变和边境raduius .button \{ \-moz-box-shadow:inset 0px 1px 0px 0px \7af013; \-webkit

怼烎@/ 2022年09月02日 14:55/ 0 赞/ 211 阅读

相关网页按钮效果css3,css3按钮效果

/\ Box colors \/ .bg-1 \{ background:\ECEFF1; color:\37474f; \} /\ Common button st

た入场券/ 2022年09月02日 14:53/ 0 赞/ 262 阅读

相关 CSS按钮样式

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <t

朴灿烈づ我的快乐病毒、/ 2022年02月05日 12:59/ 0 赞/ 418 阅读

相关 css画扇形按钮

最近项目中需要制作一个扇形按钮，效果是这样的： ![1478663-20190319164222762-2136079326.png][] 周围四个扇形，和中间的小圆，

秒速五厘米/ 2021年12月23日 03:17/ 0 赞/ 388 阅读

相关如何通过CSS创建不同效果的按钮

- 通过CSS可以实现多种按钮效果，比如通过CSS渐变属性可以设置颜色渐变的效果按钮，通过 box-shadow实现按下效果按钮等 - 今天在本篇文章中将分享如何制作几种...

你的名字/ 2021年02月01日 16:42/ 0 赞/ 666 阅读