<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<style>
		.Button {
    display: inline-block;
    margin: 0;
    min-width: 100px;
    padding: .5rem;
    border: 1px solid;
    border-color: #3ec9cb;
    border-radius: 2px;
    background: #3ec9cb;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    text-transform: capitalize;
    text-decoration: none;
    -webkit-transition: .3s ease;
    transition: .3s ease;
    -webkit-transition-property: border-color,background-color,color;
    transition-property: border-color,background-color,color;
}
.Button.u-cta {
    border-bottom-color: #189697;
    border-bottom-width: thick;
}

.Button.u-large {
    font-size: 1.25rem;
    padding: .75em;
}
	</style>
	<button class="Button l-w-100 l-ma0 l-h5 u-large u-cta" data-reactid="7">Subscribe</button>
</body>
</html>

　　

button按钮下边框有立体效果样式的更多相关文章

  1. 微信小程序去除button按钮的边框

    小程序开发记录 小程序开发中, 有时候我们希望button不要有边框, 需要使用button::after来实现, 具体如下: .operations button::after{border:0 n ...

  2. HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. ie6下按钮下边框消失不显示的问题

    最近网站做改版,又发现一个ie6奇葩的问题,就一个很普通带边框的按钮,但在ie6中下边框不显示,ie7没有测试不知道是不是也不显示,其他浏览器正常 代码和预览效果如下: <style> b ...

  4. Bootstrap系列 -- 34. 按钮下拉菜单

    按钮下拉菜单仅从外观上看和上一节介绍的下拉菜单效果基本上是一样的.不同的是在普通的下拉菜单的基础上封装了按钮(.btn)样式效果.简单点说就是点击一个按钮,会显示隐藏的下拉菜单.按钮下拉菜单其实就是普 ...

  5. 微信小程序组件解读和分析：七、button按钮

    button按钮组件说明: button,顾名思义,按钮,类似于html的button标签.我们可以设置按钮的属性,比如字体颜色大小,背景颜色等,可以给按钮绑定事件,用户点击时会触发事件. butto ...

  6. iphone中button按钮显示为圆形解决

    iphone中button按钮显示为圆形解决: 添加样式: -webkit-appearance:button; 如果需要为直角: border-radius:0 在源码中添加如:style=&quo ...

  7. Android 自定义Button按钮显示样式（正常、按下、获取焦点）

    现在的用户对APP的外观看得很重要,如果APP内所有元件都用Android默认样式写,估计下面评论里就有一堆在骂UI丑的.今天学习自定义Button按钮样式.Button样式修改的是Button的背景 ...

  8. 表格table常见的边框设置和初步的立体效果

    做网页时经常会遇到表格,常见的表格如下: <style type="text/css"> .tbtest0 { width:500px; height:200px; b ...

  9. 超炫的Button按钮展开弧形动画效果

    ----------------------收藏备用  ------------------------------- 代码下载:http://download.csdn.net/detail/qq2 ...

随机推荐

  1. PostgreSQL Replication之第九章 与pgpool一起工作（5）

    9.5 检查复制 如果所有的节点都处于开机并运行的状态.我们就可以在集群上运行我们的第一个操作了.在我们的例子中,我们将简单地连接到pgpool并创建一个新的数据库.createdb 是一个命令行工具 ...

  2. Bomb HDU - 3555 数位dp

    Code: #include<cstdio> #include<algorithm> #include<cstring> #include<string> ...

  3. YOLOv3学习笔记

    Darknet/Yolo官网:https://pjreddie.com/darknet/yolo/ GitHub程序:https://github.com/AlexeyAB/darknet 关于程序程 ...

  4. caioj 1112 树形动态规划（TreeDP）7：战略游戏

    这道题和上一道题非常相似 这道题是看边,上一道是看点. 但是状态定义不同 看边的话没有不放不安全这种状态 因为当前结点的父亲无法让这颗子树没有看到的边看到 所以这种状态不存在 而上一道题存在不放不安全 ...

  5. JS几种遍历方式比较

    几种遍历方式比较 for of 循环不仅支持数组.大多数伪数组对象,也支持字符串遍历,此外还支持 Map 和 Set 对象遍历. for in 循环可以遍历字符串.对象.数组,不能遍历 Set/Map ...

  6. ECNUOJ 2150 完美的拯救

    完美的拯救 Time Limit:1000MS Memory Limit:65536KBTotal Submit:147 Accepted:50 Description  一只可怜的蚂蚁被万恶的魔术师 ...

  7. 洛谷——P1019 单词接龙（NOIP2000 T3）

    https://www.luogu.org/problem/show?pid=1019#sub 题目描述 单词接龙是一个与我们经常玩的成语接龙相类似的游戏,现在我们已知一组单词,且给定一个开头的字母, ...

  8. 【转】CentOS下firefox安装flash说明

    http://www.cnblogs.com/lamper/archive/2013/01/16/2862254.htm CentOS下自带了firefox,但没有flash插件的,按它自己的提示安装 ...

  9. ArcGIS api for javascript——加入动态地图

    描述 这个示例展示了增加一个按用户缩放或平移服务器每次绘制的地图.这样的地图没有切片的cache并被调用一个动态地图服务图层.ArcGISDynamicMapServiceLayer表示ArcGIS ...

  10. 受不了Android SDK文档打开缓慢问题，自己开发简易脱机浏览器。

    google android sdk离线文档打开的时候特别慢,据说是要从谷歌官网拉取一些东西导致的.脱机浏览能够解决该问题.PC端能够使用firefox. 可是Android端貌似没有支持脱机工作的浏 ...