一个超酷按钮CSS3 返回按钮

<!doctype html>

<HTML>

<head>

<title>一个按钮CSS3 返回按钮</title>

<style>

.kele:before{ position: absolute; content: " "; border: transparent 14px solid; border-width: 13px 8px ; border-right-color: #CCC; top: 1px; left: -16px; height: 0; width: 0; }

.kele{ position: relative; width: 40px; height: 28px; background: #EEE; border-radius: 5px;  margin: 30px; text-align: center; line-height: 28px; color: #999; font-size: 14px; border: 1px solid #CCC; }

.kele:after{ position: absolute; content: " "; border: transparent 13px solid;  border-width:  12px 8px; border-right-color: #EEE; top: 2px; left: -15px; height: 0; width: 0; }

</style>

</head>

<body>

<div><A href="http://www.999jiujiu.com/">http://www.999jiujiu.com/</A></div>

<div class="kele">返回</div>

</body>

</html>

时间： 2024-10-29 12:02:09

一个超酷按钮CSS3 返回按钮的相关文章

Unity CG 写一个超酷的 ray-marching（shader纯代码写3D）

Unity CG 写一个超酷的 ray-marching(shader纯代码写3D) 1.其实自从看了http://www.shadertoy.com(inigo quilez为其主创始人)上的shader后,让我感到很高兴 2.更重要的是自从我接触了一个叫 inigo quilez 的shader技术后,让我觉得shader情感更深的浓厚了 3.http://www.iquilezles.org/ 哈哈,当然给大家一个崇拜的机会吧,你一定会学到你想学到的技术和秘密 哈哈,邪恶的专栏地址放送,一

用border做一个移动端常见的返回按钮

第一步 .hs1{ float: left; .mt(.25rem); .ml(.12rem); width: .3rem; height: .3rem; border-top: 2px solid #fff; //关键 border-left: 2px solid #fff; //关键 color: #fff; } <a href="javascript:;" class="hs1"></a> 效果如图 第二步:运用css3 tranfor

CSS3 飘带菜单 超酷3D CSS3菜单

之前我们分享过不少漂亮的CSS3菜单,CSS3/jQuery创意盒子动画菜单.CSS3垂直菜单 菜单有立体动画视觉.CSS3多级下拉菜单 弹性展开下拉动画.今天要分享的这款CSS3菜单非常特别,菜单是呈飘带状的,鼠标滑过菜单项时,菜单项会凸显出来,表现的非常立体动感. 下面我们来一起看看实现这款CSS3飘带菜单的具体过程以及源代码.源码主要由HTML代码和CSS代码组成,还比较简单. HTML代码: <div class=’ribbon’><a href=’#'><span&

超酷的CSS3网页加载效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

【转】如何建立一个样式新颖的CSS3搜索框

在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章中,大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框.当然在开始介绍前你也可以下载源代码或者查看在线演示. HTML举例: 正如接下来你所看到的,标记很少,并且很容易理解: <form class=“cf form-wrapper”> <input type=“text” place

精选10款超酷的HTML5/CSS3菜单

今天向大家精选了10款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧. 1.CSS3手风琴菜单 下拉展开带弹性动画 利用CSS3技术可以实现各种各样的网页菜单,我们之前也在CSS3菜单栏目中分享了许多CSS3菜单.今天我们分享的这款是CSS3手风琴菜单,菜单项在展开和收缩的时候菜单项会有弹性动画效果.每一层父级菜单有一个小三角,菜单项在展开的时候这个小三角也会出现动画,非常酷. 在线演示 / 源码下载 2.CSS3动画下拉菜单 带动画图标 利用CSS3可以制作很多精

如何设置自定义导航控制器全局返回按钮 --- ios

怎么样可以一次性把导航控制器中的返回键全都自定义. 思路: 我们可以在push的时候来设置这个自定义按钮,push有一个方法 - (void)pushViewController:(UIViewController *)viewController animated:(BOOL)animated{} 在这个方法中viewController是push的对象 但是要判断这个viewController是不是根控制器 - (void)pushViewController:(UIViewControl

使用Javascript来创建一个响应式的超酷360度全景图片查看幻灯效果

360度的全景图片效果常常可以用到给客户做产品展示,今天这里我们推荐一个非常不错的来自Robert Pataki的360全景幻灯实现教程,这里教程中将使用javascript来打造一个超酷的全景幻灯实现,相信大家一定会喜欢的! 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代

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

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