具有吸引力的css3属性的格式化按钮

Question

我不擅长CSS但是创建了css按钮看起来很不错。

但它不会像雅虎邮箱或按钮@ http://www.alchemyapi.com/products/demo/

那样闪亮

这是我的小提琴演示：

http://jsfiddle.net/karimkhan/y6XGg/

如果有人能帮助我美化它，我感激不尽！

<input type="submit" class="button" onclick="GetSentiment()" id="GetSentiment" value="Get Sentiment" />

是css还是css3？有什么不同

Answer 1

他们正在使用渐变，这可以通过使用图像或css3来完成：

background-image: linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -o-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -moz-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -webkit-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);
background-image: -ms-linear-gradient(bottom, rgb(150,150,150) 43%, rgb(179,179,179) 72%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.43, rgb(150,150,150)),
    color-stop(0.72, rgb(179,179,179))
);

网上有很多梯度生成器，如： http://gradients.glrzad.com/

Answer 2

在你的CSS中

 background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
 background: -moz-linear-gradient(top, #F70247, #F70247);
 -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
 filter: progid:DXImageTransform.Microsoft.gradient(startColorStr=#F70247, endColorStr=#F70247);
 display:inline-block; /* IE is so silly */
 }

你的渐变从＃F70247变为＃F70247所以没有渐变你必须将这些颜色值中的一个改为另一个让你高兴的

Answer 3

您当前的背景有一个渐变，从一种颜色到完全相同的颜色（意味着甚至不应用渐变）。

background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#F70247));
background: -moz-linear-gradient(top, #F70247, #F70247);
/* Etc... */

绝对没有区别：

background: #F70247;

您的开始和结束颜色均为#F70247。如果我们将您的一种颜色更改为不同的颜色，我们可以生成渐变（JSFiddle demo）：

 background: -webkit-gradient(linear, 0 0, 0 100%, from(#F70247), to(#EEE));
 background: -moz-linear-gradient(top, #F70247, #EEE);
/* Etc... */

我们将从#F70247转到#EEE。

Colorzilla 的Ultimate CSS Gradient Generator是一个WYSIWYG，用于生成与新旧浏览器兼容的CSS渐变背景。如果你想创建一个类似于你链接的渐变，我强烈建议使用它。

Answer 4

看起来您的演示中的渐变从一种颜色变为相同颜色，因此，根本不会产生渐变！

看看这个：http://jsfiddle.net/y6XGg/1/

 background: linear-gradient(to bottom, #febbbb 0%,#fe9090 45%,#ff5c5c 100%);

有用的链接：http://www.colorzilla.com/gradient-editor/

Answer 5

您可以使用多个插入阴影来获取您正在寻找的一些效果，请参阅： http://jsfiddle.net/y6XGg/2/

     -webkit-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
     -moz-box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;
     box-shadow: 0px 1px 3px #666666, 0px 0px 6px #F3215F inset, 0px 1px 0px #EDC2DE inset;

您的背景渐变也可以调整，以产生更强的效果。

Answer 6

您只需转到http://cssgradientbutton.com/#并从那里生成一个按钮即可。您可以编辑按钮并增加边框半径大小以更改角的圆角以匹配您的jsfiddle。它还会在您将鼠标悬停在按钮上时生成css，让您感觉自己被轻轻推入。

您还可以添加嵌入阴影，这样可以提供漂亮的外观：

悬停之前：

悬停时：