css实现浮雕风按钮

HTML布局

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>浮雕风按钮实现</title><link rel="stylesheet" href="css/main.css">
</head>
<body>
<form><div class="segment"><h1>Sign up</h1></div><label><input type="text" placeholder="Email Address" /></label><label><input type="password" placeholder="Password" /></label><button class="red" type="button"><i class="icon ion-md-lock"></i> Log in</button><div class="segment"><button class="unit" type="button"><i class="icon ion-md-arrow-back"></i></button><button class="unit" type="button"><i class="icon ion-md-bookmark"></i></button><button class="unit" type="button"><i class="icon ion-md-settings"></i></button></div><div class="input-group"><label><input type="text" placeholder="Email Address" /></label><button class="unit" type="button"><i class="icon ion-md-search"></i></button></div>
</form>
</body>
</html>

CSS美化

body,
html {background-color: #ebecf0;
}h1 {margin: 0;
}body,
p,
input,
select,
textarea,
button {font-family: "Montserrat", sans-serif;letter-spacing: -0.2px;font-size: 16px;
}div,
p {color: #babecc;text-shadow: 1px 1px 1px #fff;
}form {padding: 16px;width: 320px;margin: 0 auto;
}.segment {padding: 32px 0;text-align: center;
}button,
input {border: 0;outline: 0;font-size: 16px;border-radius: 320px;padding: 16px;background-color: #ebecf0;text-shadow: 1px 1px 0 #fff;
}label {display: block;margin-bottom: 24px;width: 100%;
}input {margin-right: 8px;box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;width: 100%;box-sizing: border-box;transition: all 0.2s ease-in-out;appearance: none;-webkit-appearance: none;
}input:focus {box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}button {color: #61677c;font-weight: bold;box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;transition: all 0.2s ease-in-out;cursor: pointer;font-weight: 600;
}button:hover {box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
}button:active {box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}button .icon {margin-right: 8px;
}button.unit {border-radius: 8px;line-height: 0;width: 48px;height: 48px;display: inline-flex;justify-content: center;align-items: center;margin: 0 8px;font-size: 19.2px;
}button.unit .icon {margin-right: 0;
}button.red {display: block;width: 100%;color: #ae1100;
}.input-group {display: flex;align-items: center;justify-content: flex-start;
}.input-group label {margin: 0;flex: 1;
}

效果预览

CSS项目之浮雕风按钮相关推荐

css 倒三角_倒三角结构：如何管理大型CSS项目
css 倒三角 by Luuk Gruijs Luuk Gruijs着倒三角结构:如何管理大型CSS项目 (The Inverted Triangle Architecture: how to ma ...
社会化图标html,[CSS]响应式社会化分享按钮
[CSS]响应式社会化分享按钮 6月 18, 2014 评论 (2) Sponsor 目前很多网站都使用了社会化分享按钮,即使是一个简单的专题页都会使用上,所以这里分享大家一个响应式社会化分享按钮(R ...
怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式
前言文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式. 不同浏览器的file控件表现形式不一样火狐谷歌 IE 不同浏览器 ...
CSS自定义文件上传按钮
原文:CSS自定义文件上传按钮今天一同事问我文件上传按钮的问题,情况是这样的,他页面上有3个按钮,分为左中右三个,左边的位按钮甲,右边的位按钮乙,而中间的就是个文件选择按钮,情况大概是这个样子的: ...
纯CSS实现的3D简洁按钮设计
日期:2012-6-22 来源:GBin1.com 在线演示本地下载今天我们介绍一篇来自Brandon Pierce的3D按钮设计.希望大家喜欢! 基本HTML <nav>  &l ...
html网页登录红色按钮,CSS让网页提交input按钮与众不同
CSS让网页提交input按钮与众不同互联网发布时间:2009-04-02 19:36:01 作者:佚名我要评论网页制作Webjx文章简介:你是不是觉得自己的主页不够靓丽,想让它有 ...
纯 CSS 制作赛博朋克 2077 “故障风”按钮
转自:CodingStarup juejin.cn/post/6908565208596217863 大家好,我是 Steven. 虽然我不打机,但我都知道赛博朋克 2077 这个游戏,在它的网页上 ...
牛B！纯 CSS 制作赛博朋克 2077 “故障风”按钮
(给前端瓶子君加星标) 转自:CodingStarup juejin.cn/post/6908565208596217863 大家好,我是 Steven. 虽然我不打机,但我都知道赛博朋克 2077 ...
CSS之帅气朋克字体效果以及“故障风”按钮的实现（图片+按钮）
欢迎来到HTML部件频道

CSS项目之浮雕风按钮

css实现浮雕风按钮

效果预览

CSS项目之浮雕风按钮相关推荐

最新文章

热门文章