html - 特殊样式按钮 点击按下去要有凹下和弹起的效果

查看:2461
本文介绍了html - 特殊样式按钮 点击按下去要有凹下和弹起的效果的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

问 题

需要做一个类似上图中形状的返回按钮

参考 一个按钮CSS3 返回按钮 这个例子,做出了如下的返回按钮:
特殊样式 返回按钮
按下弹起的颜色效果只有右边的div有效,而左边的小箭头是:before:after加进去的,
请问,它的颜色怎么设置 为渐变色? 达到让它看起来和右边的部分浑然一体 的效果。。。

解决方案

嗨,你需要的是这个CSS Button

如下


.myButton {
    background-color:#44c767;
    -moz-border-radius:28px;
    -webkit-border-radius:28px;
    border-radius:28px;
    border:1px solid #18ab29;
    display:inline-block;
    cursor:pointer;
    color:#ffffff;
    font-family:Arial;
    font-size:17px;
    padding:16px 31px;
    text-decoration:none;
    text-shadow:0px 1px 0px #2f6627;
}
.myButton:hover {
    background-color:#5cbf2a;
}
.myButton:active {
    position:relative;
    top:1px;
}

这篇关于html - 特殊样式按钮 点击按下去要有凹下和弹起的效果的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆