<!DOCTYPE html>

<html>

    <head>

    <meta charset="UTF-8">

    <title>test</title>

    <style>

      .btn {

        width: 100px;

        text-align: center;

        height: 50px;

        line-height: 50px;

        background: #000;

        color: #fff;

        position: relative;

      }

      .btn:after {

        position: absolute;

        content: '';

        width: 30px;

        height: 30px;

        background: #fff;

        top: 10px;

        right: -15px;

        border-radius: 100%;

      }

    </style>

</head>

<body>

 <div class="btn">

   button

 </div>

    </body>

</html>

test

button

CSS实现矩形按钮右边缘的中间有个往里凹的小半圆的更多相关文章

  1. 如何用CSS实现矩形按钮右边缘的中间有个往里凹的小半圆

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

  2. 「HTML+CSS」--自定义按钮样式【002】

    前言 Hello!小伙伴! 首先非常感谢您阅读海轰的文章,倘若文中有错误的地方,欢迎您指出- 哈哈 自我介绍一下 昵称:海轰 标签:程序猿一只|C++选手|学生 简介:因C语言结识编程,随后转入计算机 ...

  3. css圆角矩形及去掉空格属性

    css圆角矩形 -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; 去掉空格 white-space:nowra ...

  4. css笔记——css 实现自定义按钮

    css实现自定义按钮的样式实际上很早就有了,只是会用的人不是很多,里面涉及到了最基础的css写法,在火狐中按钮还是会显示出来,这时需要将i标签的背景设置为白色,同时z-index设置比input高一些 ...

  5. 代码：CSS仿制 苹果按钮图标

    首先,先复习一下:CSS的线性渐变.径向渐变 .linear{ background-image:-webkit-linear-gradient(90deg,#f8f8f8 20%,#dae9fa 9 ...

  6. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  7. [HTML/CSS]uploadify自定义按钮样式

    概述 在项目中经常用到uploadify上传插件,但是FLASH按钮的外观往往跟我们网页的设计的主题色不太搭配.这时就需要对其样式进行修改. 样式文件是uploadify.css. 打开这个文件后,你 ...

  8. 在Microsoft Expression Blend 2 中绘制圆角矩形按钮

    原文:在Microsoft Expression Blend 2 中绘制圆角矩形按钮 /* 声明:转载请保留此信息:http://www.BrawDraw.com, http://www.ZPXP.c ...

  9. iOS开发之自定义导航栏返回按钮右滑返回手势失效的解决

    我相信针对每一个iOS开发者来说~除了根视图控制器外~所有的界面通过导航栏push过去的界面都是可以通过右滑来返回上一个界面~其实~在很多应用和APP中~用户已经习惯了这个功能~然而~作为开发者的我们 ...

随机推荐

  1. 取消input默认样式

    有时候input在页面中被聚焦后会出现默认的边框样式,可以通过以下方法取消去除 .input:focus{ outline: none;}

  2. 玩玩kafka1 单机安装

    今天主要来一遍kafka单机版的安装,比较简单易上手,关于kafka的介绍我就不贴了,大家可以自行搜索 1.首先将tgz包传到centos目录下(这里使用xftp工具) ok后查看一下tgz包是否已经 ...

  3. phtread_mutex 组合

    phtread_mutex通过mutexattr设定其类型,并保存在成员__kind中.pthread_mutex的锁操作函数根据__kind进行方法的分派(dispatch).__kind由5个字段 ...

  4. ASP.Net MVC连接MySQL和Code First的使用

    首先要准备一下的工具作为环境 MySQL Community Server 5.7.x My Workbench 6.3 VS2017 新建一个项目,NetMySQLCodeFirst 选择MVC,再 ...

  5. Android NDK开发之C调用Java及原生代码断点调试（二）

    上一篇中,我们主要学习了Java调用本地方法,并列举了两大特殊实例来例证我们的论据,还没学习的伙伴必须先去阅读下,本次的学习是直接在上一篇的基础上进行了.点击:Android NDK开发之从Java与 ...

  6. VueJs开发笔记—IDE选择和WebStorm性能优化、框架特性和数据调用、路由选项以及使用

    一.IDE的选择: VsCode和WebStorm都是不错的选择,两者运行调试都非常的方便都可以使用快捷键运行和停止,就打开项目的速度和对电脑配置的要求来说,vscode要比webstorm要出色很多 ...

  7. MFC入门教程01 Windows编程基础

  8. 在Windows中单机环境下创建RabbitMQ集群

    本文根据:http://www.360doc.com/content/15/0312/17/20874412_454622619.shtml整理而来 RabbitMQ具有很好的消息传递性能,同时又是开 ...

  9. 基于python的爬虫（一）

    抓取网页 python核心库 urllib2 实现对静态网页的抓取,不得不说,"人生苦短,我用python"这句话还是有道理的,要是用java来写,这估计得20行代码 (对不住了博 ...

  10. js算法集合（二） javascript实现斐波那契数列 （兔子数列）

    js算法集合(二)  斐波那契数列 ★ 上一次我跟大家分享一下做水仙花数的算法的思路,并对其扩展到自幂数的算法,这次,我们来对斐波那契数列进行研究,来加深对循环的理解.     Javascript实 ...