<!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. springMVC接受前台传值

    今天,用ajax向springMVC的控制器传参数,是一个json对象.({"test":"test","test1":"test ...

  2. Linux 下段错误 core文件

    什么是core dump? core的意思是内存,dump的意思是扔出来,堆出来:当一个程序奔溃时,在进程当前工作目录的core文件中复制了该进程的存储图像.core文件仅仅是一个内存映像(同时加上调 ...

  3. Java获取电脑硬件信息

    package com.szht.gpy.util; import java.applet.Applet; import java.awt.Graphics; import java.io.Buffe ...

  4. DNA Sequence POJ - 2778 AC 自动机 矩阵乘法

    定义重载运算的时候一定要将矩阵初始化,因为这个调了一上午...... Code: #include<cstdio> #include<algorithm> #include&l ...

  5. appium 模拟实现物理按键点击

    appium自动化测试中,当确认,搜索,返回等按键通过定位点击不好实现的时候,可以借助物理按键来实现.appium支持以下物理按键模拟: 电话键 KEYCODE_CALL 拨号键 5 KEYCODE_ ...

  6. POJ2104 K-th Number(整体二分）

    题解 又一次做这个题上一次用的是线段树上二分.这次用的是整体二分.结果: (第一个是整体二分) 整体二分就是对于所有查询都二分一个值.然后根据能不能成立把询问修改分成两部分,然后第二部分继承第一部分的 ...

  7. celery 学习

    1. 列出计划的ETA任务(worker) celery -A proj inspect scheduled 参考文档:http://docs.celeryproject.org/en/latest/ ...

  8. Spring学习总结（12）——Druid连接池及监控在spring配置

    Druid连接池及监控在spring配置如下: <bean id="dataSource" class="com.alibaba.druid.pool.DruidD ...

  9. Java基础学习总结（16）——Java制作证书的工具keytool用法总结

    一.keytool的概念 keytool 是个密钥和证书管理工具.它使用户能够管理自己的公钥/私钥对及相关证书,用于(通过数字签名)自我认证(用户向别的用户/服务认证自己)或数据完整性以及认证服务.在 ...

  10. bootstrap结合google code prettify的问题

    发现prettify不能显示行号,于是上网找了解决方法: 只使用prettify的js的文件,不使用css文件,另外添加这段css: .com { color: #93a1a1; } .lit { c ...