一个css3按钮练习

RunJS地址:http://runjs.cn/detail/vnhi5yuw

在本次的练习中,css分析如下

.button{
    text-transform:uppercase;//转为大写
    text-align:center;//文字水平垂直居中
        line-height:37px;
    vertical-align:middle;
    font-family:Arial;//字体
    -webkit-text-stroke:1px #444;//字体镂空

    height:35px;
    width:140px;
    background-color:#888;

    background:linear-gradient(#aaa,#888,#aaa);//渐变
    box-shadow:0 0 5px black;//div阴影
    border-radius:10px;//div圆角
}    
时间: 2024-08-28 17:35:29

一个css3按钮练习的相关文章

基础理解2:CSS3按钮动画

一个Css3按钮效果很好,仔细看了一下发现就是::after,::before然后加上transition,transform等效果实现,主要关注一下几点就能轻松实现: 1.伪类需要position定位,相对的button也需要定位一下 2.设置一下z-index属性,一般button设置为1, button::after或者button:before设置为-1即可 3.transition实现动画效果,如果需要transform旋转一下 代码如下: <!DOCTYPE html> <h

CSS3按钮鼠标悬浮光圈效果

1 .HTML相关知识点  HTML(超文本标记语言)是网页的核心.首先你要学会,不要害怕,HTML很容易学习的,刚开始多记多练,但是到最后还是要自己深入专研,简单的入门是很快,但学好HTML是成为Web开发人员的基本条件. 学习资源: HTML Dog (http://htmldog.com/) HTML入门指南 (http://www.w3.org/MarkUp/Guide/) W3C HTML学习教程 (http://www.w3schools.com/html/) 2.CSS3相关知识点

超漂亮的CSS3按钮制作教程分享

要求 必备知识 基本了解CSS语法,初步了解CSS3语法知识. 开发环境 Adobe Dreamweaver CS6/Chrome浏览器 演示地址 演示地址 利用CSS3属性制作按钮,我们只需要用到Gradient属性,不用使用任何图片素材和JavaScript代码,仅仅通过CSS就能制作出好看的渐变按钮.按钮的大小可以通过CSS属性就能轻松的修改,而且它可以使用html的很多标签来制作,比如div,button,span,a,input[‘submit’]等等.下列案例就是通过CSS3制作的按

8款超酷而实用的CSS3按钮动画

1.CSS3分享按钮动画特效 这是一款基于CSS3的社会化分享按钮,按钮非常简单,提供了分享到twitter.facebook.youtube等大型社交网站.每一个分享按钮都有个大社交网站的Logo图标,并且在鼠标滑过这些按钮时,利用CSS3的动画特性出现滑动的动画效果. 在线演示 源码下载 2.HTML5/CSS3悬浮按钮特效 Canvas彩球飞舞效果 这次要分享一个非常具有动画色彩的CSS3按钮,按钮的外观比较一般,但它有两个特别的地方:一.按钮悬浮,整个按钮看上去像是悬浮在半空中一样,很立

10款CSS3按钮 - 再也不用为按钮设计而发愁了

这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按钮特效 这是用纯CSS3实现的一组按钮特效,这组按钮不仅色彩绚丽,更重要的是如果在chrome或者safari浏览器中还能呈现出闪闪发光的特效,非常酷的一组按钮. 2.另类风格的CSS3按钮特效 这组CSS3按钮比较特别,整体上来看,这组CSS3按钮给人的感觉是非常有爱非常萌.按钮上都会有一个小图标

10款CSS3按钮 - 程序员再也不用为按钮设计而发愁了...

这次主要给大家分享10款风格各异的CSS3按钮,如果你希望你的页面也能有很炫的样式,那么我相信这10款CSS3按钮就非常适合你,而且每一款都整理了源代码供参考,一起来看看吧. 1.绚丽的CSS3发光按钮特效 这是用纯CSS3实现的一组按钮特效,这组按钮不仅色彩绚丽,更重要的是如果在chrome或者safari浏览器中还能呈现出闪闪发光的特效,非常酷的一组按钮. 2.另类风格的CSS3按钮特效 这组CSS3按钮比较特别,整体上来看,这组CSS3按钮给人的感觉是非常有爱非常萌.按钮上都会有一个小图标

20种炫酷CSS3按钮鼠标滑过特效

这是一款集合20组不同CSS3按钮样式和按钮鼠标滑过特效的插件.这20组css3按钮每一组都有3种示例,每一个示例都使用CSS3制作炫酷的鼠标滑过动画.这些按钮适用于各种场合,相信总有一款适合你. 请注意这些按钮动画效果只在最新版本的现代浏览器上工作,(Mobile)Safari浏览器只支持其中很少的效果. 该按钮动画特效中大多数使用的是CSS transitions,但有一些动画效果也使用CSS animations来完成. 在线演示:http://www.htmleaf.com/Demo/2

微信支付开发(APP)的各种坑,.net和iOS的各种陷阱,解决.net调用下单接口提示无权限,解决iOS跳转到微信支付页面中间只有一个确定按钮

直入主题之前,请容我吐槽一下微*的官方东西:ASDFQ%#$%$#$%^[email protected]#$%DSFQ#$%.......:吐槽玩了!大家心照就好. 要完成手机APP跳转到微信的APP进行微信支付,需要进行如下操作: 1.先去微信的开放平台(http://open.weixin.qq.com)进行开发者账号的注册. 2.新建一个APP应用,然后填写必填信息提交审核. 3.进入APP应用,在接口信息中,进行申请“获得微信支付能力”的功能,期间会提交相关的公司营业信息证明等. 通过

css3按钮练习

css3按钮 <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">