How can I make a nice yellow button with text shadow? - html

I almost have a nice blue button but I want the background yellow and I want the text in center.
#post3 {
width: 450px;
background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6db3f2), color-stop(50%, #54a3ee), color-stop(51%, #3690f0), color-stop(100%, #1e69de)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* IE10+ */
background: linear-gradient(to bottom, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=0); /* IE6-9 */
/*display: inline-block;*/
border: 1px solid rgb(0, 0, 0);
/*width: 290px;*/
height: 45px;/*
font-size: 150%;*/
text-decoration: none;
/*text-align: center;*/
color: rgb(255, 255, 255);
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
background-position: initial initial;
background-repeat: initial initial;
}
<div id="post3"> Loren Ipsum</div>
Can you please help me? I don't know how to center the text and I don't know how to apply a text shadow.


Check this out:
Demo
background-image: -webkit-linear-gradient(top, rgb(242, 227, 109) 0%, rgb(219, 238, 84) 50%, rgb(240, 231, 54) 51%, rgb(222, 222, 30) 100%);
width:450px; /*It was width=450px; */


<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<style>
#post3 {
background: #ffcf32; /* Old browsers */
background: -moz-linear-gradient(top, #ffcf32 0%, #ffff30 50%, #f7df27 51%, #ffdf89 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffcf32), color-stop(50%,#ffff30), color-stop(51%,#f7df27), color-stop(100%,#ffdf89)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffcf32 0%,#ffff30 50%,#f7df27 51%,#ffdf89 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcf32', endColorstr='#ffdf89',GradientType=0 ); /* IE6-9 */
/*display: inline-block;*/
border: 1px solid rgb(0, 0, 0);
/*width: 290px;*/
height: 45px;/*
font-size: 150%;*/
text-decoration: none;
/*text-align: center;*/
font-weight: bold;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
background-image: -webkit-linear-gradient(top, rgb(109, 179, 242) 0%, rgb(84, 163, 238) 50%, rgb(54, 144, 240) 51%, rgb(30, 105, 222) 100%);
background-position: initial initial;
background-repeat: initial initial;
width: 300px;
text-align: center;
}
span.center-content {
display: inline-block;
vertical-align: middle;
line-height:45px;
}
#post3 a {
color: #fff;
font-size: 24px;
letter-spacing: 2px;
text-decoration: none;
text-shadow: 2px 3px 7px #000000;
text-transform: uppercase;
}
</style>
</head>
<body>
<div id="post3"><span class="center-content">Loren Ipsum</span></div>
</body>
</html>
Just copy and paste the code above you should see the yellow colored button with gradient effect. Have a look at the URL http://www.colorzilla.com/gradient-editor/#ffcf32+0,ffff30+50,f7df27+51,ffdf89+100;Custom for creating the gradients on the fly.
This code coveres
Yellow gradient
Horizontally and vertically centered text
Shadow effect for the text on the button

Related

Why isn't grid item shifting to the end?

I'm trying to send the word "Contact" to the end of the grid but it doesn't seem to move at all.
I'm new at using CSS Grid properties so Im not sure what I'm doing wrong. I have a grid container for all the elements in the page and also a "green" class that contains all the words with a green background. I gave "Contact" an id so I could move just that one word but again, nothing happens.
.container {
display: grid;
grid-gap: 0px;
grid-template-columns: auto;
grid-template-rows: auto;
}
.green {
grid-column-start: 1;
grid-column-end: 4;
}
#Contact {
justify-self: end;
}
.zone {
padding: 30px 50px;
cursor: pointer;
display: inline-block;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">Project Grid</div>
<div class="zone yellow">Footer</div>
</div>

The grid is applied to .container and doesn't affect .zone.green. Make .zone.green a flexbox instead:
.zone.green{
display: flex;
}
.zone.green span{
margin-left: 10px;
}
.zone.green span#Contact{
margin-left: auto;
}
.zone.green{
display: flex;
}
.zone.green span{
margin-left: 10px;
}
.zone.green span#Contact{
margin-left: auto;
}
.container {
display: grid;
grid-gap: 0px;
grid-template-columns: auto;
grid-template-rows: auto;
}
.green {
grid-column-start: 1;
grid-column-end: 4;
}
#Contact {
justify-self: end;
}
.zone {
padding: 30px 50px;
cursor: pointer;
display: inline-block;
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">Project Grid</div>
<div class="zone yellow">Footer</div>
</div>

First, "Contact" in the HTML is an ID. But in the CSS it's a class.
Second, #contact { justify-self: end } won't work because the parent isn't a grid container.
Here's a simple solution using a nested flex container:
.container {
display: grid;
}
.green {
grid-column-start: 1;
grid-column-end: 4;
display: flex; /* new */
}
#Contact {
margin-left: auto; /* new */
}
.zone {
padding: 30px 50px;
cursor: pointer;
/* display: inline-block; */ /* unnecessary; also, interferes with specificity */
color: #FFF;
font-size: 2em;
border-radius: 4px;
border: 1px solid #bbb;
transition: all 0.3s linear;
}
.zone:hover {
-webkit-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-moz-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
-o-box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
box-shadow: rgba(0, 0, 0, 0.8) 0px 5px 15px, inset rgba(0, 0, 0, 0.15) 0px -10px 20px;
}
/*https://paulund.co.uk/how-to-create-shiny-css-buttons*/
/***********************************************************************
* Green Background
**********************************************************************/
.green {
background: #56B870;
/* Old browsers */
background: -moz-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #56B870), color-stop(100%, #a5c956));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #56B870 0%, #a5c956 100%);
/* IE10+ */
background: linear-gradient(top, #56B870 0%, #a5c956 100%);
/* W3C */
}
/***********************************************************************
* Red Background
**********************************************************************/
.red {
background: #C655BE;
/* Old browsers */
background: -moz-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C655BE), color-stop(100%, #cf0404));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* IE10+ */
background: linear-gradient(top, #C655BE 0%, #cf0404 100%);
/* W3C */
}
/***********************************************************************
* Yellow Background
**********************************************************************/
.yellow {
background: #F3AAAA;
/* Old browsers */
background: -moz-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F3AAAA), color-stop(100%, #febf04));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* IE10+ */
background: linear-gradient(top, #F3AAAA 0%, #febf04 100%);
/* W3C */
}
/***********************************************************************
* Blue Background
**********************************************************************/
.blue {
background: #7abcff;
/* Old browsers */
background: -moz-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #7abcff), color-stop(44%, #60abf8), color-stop(100%, #4096ee));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* IE10+ */
background: linear-gradient(top, #7abcff 0%, #60abf8 44%, #4096ee 100%);
/* W3C */
}
<div class="container">
<div class="zone green">
<span>About</span>
<span>Products</span>
<span>Our Team</span>
<span id="Contact">Contact</span>
</div>
<div class="zone red">Cover</div>
<div class="zone blue">Project Grid</div>
<div class="zone yellow">Footer</div>
</div>

How to make a button with an obtuse angle?

how to make a button with an obtuse angle?
I would like to happen like this
I got here so
My code - Fiddle
*{
box-sizing: border-box;
}
.btn{
display: inline-block;
padding: 16px 30px;
color: #fff;
border: 1px solid #4A803C;
position: relative;
border-radius: 3px;
background: rgb(74,168,28); /* Old browsers */
background: -moz-linear-gradient(top, rgba(74,168,28,1) 0%, rgba(63,155,19,1) 100%, rgba(56,146,12,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(74,168,28,1) 0%,rgba(63,155,19,1) 100%,rgba(56,146,12,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4aa81c', endColorstr='#38920c',GradientType=0 );
}
.btn > span{
position:relative;
z-index: 1;
}
.btn:after {
content: "";
width: 35px;
height: 35px;
display: block;
position: absolute;
top: 7px;
right: -18px;
border: 1px solid #4A803C;
border-left: none;
border-bottom: none;
border-radius: 3px;
-webkit-transform: rotate(47deg) skew(5deg);
transform: rotate(47deg) skew(5deg);
background-image: -moz-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
background-image: -webkit-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
background-image: -ms-linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
background-image: linear-gradient( 143deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}
.btn:hover{
background: rgb(56,146,12); /* Old browsers */
background: -moz-linear-gradient(top, rgba(56,146,12,1) 0%, rgba(63,155,19,1) 0%, rgba(74,168,28,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(56,146,12,1) 0%,rgba(63,155,19,1) 0%,rgba(74,168,28,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#38920c', endColorstr='#4aa81c',GradientType=0 );
}
.btn:hover:after{
background-image: -moz-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
background-image: -webkit-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
background-image: -ms-linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
background-image: linear-gradient( -47deg, rgb(74,168,28) 0%, rgb(63,155,19) 100%);
}
<a href="#" class="btn">
<span>Умножитель матрицы</span>
</a>
I would be glad of any help.
Thank you

A simple solution would be to add a rotateY(Xdeg) to the .btn:after element. This would make the element's Y-axis get rotated and thus would make it look narrower than it actually is.
Rotation angle can be modified as required. It can be any value below 90 degrees depending on how wide or narrow the arrow should be. Higher the value the narrower the arrow would be.
* {
box-sizing: border-box;
}
.btn {
display: inline-block;
padding: 16px 30px;
color: #fff;
border: 1px solid #4A803C;
position: relative;
border-radius: 3px;
background: rgb(74, 168, 28);
background: linear-gradient(to bottom, rgba(74, 168, 28, 1) 0%, rgba(63, 155, 19, 1) 100%, rgba(56, 146, 12, 1) 100%);
}
.btn > span {
position: relative;
z-index: 1;
}
.btn:after {
content: "";
width: 35px;
height: 35px;
display: block;
position: absolute;
top: 7px;
right: -18px;
border: 1px solid #4A803C;
border-left: none;
border-bottom: none;
border-radius: 3px;
transform: rotateY(45deg) rotate(47deg) skew(5deg);
background-image: linear-gradient(143deg, rgb(74, 168, 28) 0%, rgb(63, 155, 19) 100%);
}
.btn:hover {
background: rgb(56, 146, 12);
background: linear-gradient(to bottom, rgba(56, 146, 12, 1) 0%, rgba(63, 155, 19, 1) 0%, rgba(74, 168, 28, 1) 100%);
}
.btn:hover:after {
background-image: linear-gradient(-47deg, rgb(74, 168, 28) 0%, rgb(63, 155, 19) 100%);
}
<a href="#" class="btn">
<span>Умножитель матрицы</span>
</a>

CSS issue with background button [duplicate]

This question already has answers here:
How do I combine a background-image and CSS3 gradient on the same element?
(20 answers)
Closed 8 years ago.
I have a button, that has a gradient on it. I also needs an image arrow on it, but when I put it to background, and a button with two classes it seems not to work. Below is an example:
<button class="btn btn-wide">Load more</button>
.btn{
background: rgb(0,166,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,166,255,1) 0%, rgba(0,166,255,1) 50%, rgba(2,154,236,1) 53%, rgba(2,154,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,166,255,1)), color-stop(50%,rgba(0,166,255,1)), color-stop(53%,rgba(2,154,236,1)), color-stop(100%,rgba(2,154,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a6ff', endColorstr='#029aec',GradientType=0 ); /* IE6-9 */
border:0px;
color:white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
}
.btn-wide{
width:728px;
height:45px;
background-image: url('images/white-arrow-down.png') no-repeat;
background-position: 50% 50%;
}
The background at the class .btn-wide is getting ignored because of the .btn class I guess.
What would be the best markup solution in this example? :)
Jsfiddle

The issue is that you are using the background shorthand property so trying to apply a second background image merely overwrites the previous statement (the gradient).
You can use comma separated background image statements like this.
CSS
.btn{
background-image: /* note bg image */
url(http://lorempixel.com/output/abstract-q-c-32-32-2.jpg),
linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */
background-repeat:no-repeat;
border:0px;
color:white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
background-position:50% 50%;
}
.btn-wide{
width:728px;
height:45px;
}
JSFiddle Demo

Find the following link for updated fiddle.
FIDDLE
I updated the css.
.btn{
background: rgb(0,166,255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0,166,255,1) 0%, rgba(0,166,255,1) 50%, rgba(2,154,236,1) 53%, rgba(2,154,236,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,166,255,1)), color-stop(50%,rgba(0,166,255,1)), color-stop(53%,rgba(2,154,236,1)), color-stop(100%,rgba(2,154,236,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0,166,255,1) 0%,rgba(0,166,255,1) 50%,rgba(2,154,236,1) 53%,rgba(2,154,236,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00a6ff', endColorstr='#029aec',GradientType=0 ); /* IE6-9 */
border:0px;
color:white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
position:relative;
width:728px;
height:45px;
}
.btn div{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background-image: url('https://cdn4.iconfinder.com/data/icons/ionicons/512/icon-ios7-arrow-right-128.png');
background-position: right;
background-repeat:no-repeat;
background-size:32px 32px;
}
Change the arrow image path according to your image.

The problem is with this rule
background-image: url('images/white-arrow-down.png') no-repeat;
you're specifying repeat in background-image.
You can rewrite it as
background-image: url('images/white-arrow-down.png');
background-repeat: no-repeat;
Update:
Fixing actual issue in your CSS doesn't provide you with your desired results because backgorund-image is going to overwrite the gradient. You can add position: relative .btn, remove background from .btn-wide, and use :before pseudo selector to add an element to your button. Following is the CSS
.btn{
background: rgb(0, 166, 255); /* Old browsers */
background: -moz-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 166, 255, 1)), color-stop(50%, rgba(0, 166, 255, 1)), color-stop(53%, rgba(2, 154, 236, 1)), color-stop(100%, rgba(2, 154, 236, 1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(0, 166, 255, 1) 0%, rgba(0, 166, 255, 1) 50%, rgba(2, 154, 236, 1) 53%, rgba(2, 154, 236, 1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00a6ff', endColorstr='#029aec', GradientType=0); /* IE6-9 */
border: 0px;
color: white;
font-family: HelveticaNarrow;
font-weight: bold;
font-size: 12pt;
text-transform: uppercase;
cursor: pointer;
position: relative;;
}
.btn-wide{
width: 728px;
height: 45px;
}
.btn-wide:before{
content: ' ';
display: block;
height: 100%;
width: 100%;
position: absolute;
background: url('images/white-arrow-down.png') no-repeat 50% 50%;
top: 0;
left: 0;
}

CSS - Styling Font Awesome font icons

I want to stylize one of the font icon provided with Font Awesome called
fa fa-user and render color in a similar way with the below sample.
Circular border is not a problem but I cannot think of ways to render this kind of
glassy looking color combinations without using background-image property.
As far as I'm concerned, color is the only usable property because it's a font.
Is anything near to the sample image achievable with CSS?
This is Demo
EDITED
I should have mentioned that I am not looking to get the glassy look on the background.
Only on the icon itself.

You can certainly get close with some neat CSS3 effects (text-shadow and gradients)
http://jsbin.com/UCokedat/1/edit
.fa-user {
color: white;
background-color: lightgrey;
padding: 40px 45px;
font-size: 50pt;
border-radius: 50%;
text-shadow: 1px 1px 1px silver;
text-shadow: inset 1px 1px 1px #eee;
background: rgb(226,226,226);
background: -moz-linear-gradient(-45deg, rgba(226,226,226,1) 0%, rgba(219,219,219,1) 50%, rgba(209,209,209,1) 51%, rgba(254,254,254,1) 100%);
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(226,226,226,1)), color-stop(50%,rgba(219,219,219,1)), color-stop(51%,rgba(209,209,209,1)), color-stop(100%,rgba(254,254,254,1)));
background: -webkit-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -o-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: -ms-linear-gradient(-45deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
background: linear-gradient(135deg, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=1 );
}

Not sure it can be totally duplicated, but I went after a somewhat similar idea as SpliFF
http://jsbin.com/OGIKIQa/6/edit
.fa-user {
color: white;
padding: 40px 45px;
font-size: 50pt;
}
.fa-user:before {
background: -moz-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(0,0,0,0.65)), color-stop(100%,rgba(0,0,0,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(-45deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* IE10+ */
background: linear-gradient(135deg, rgba(0,0,0,0.65) 0%,rgba(0,0,0,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a6000000', endColorstr='#00000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
color: white;
background-color: lightgrey;
padding: 40px 45px;
font-size: 50pt;
border-radius: 50%;
}

How to create a tiled background button using CSS

I am trying to create a button like this (input type="submit"):
using an image that needs to be tiled to achieve the above effect.
I have tried doing this so far:
border: none;
background: url(myImage.png) no-repeat;
background-size: 80px 40px;
padding-left: 40px;
padding-right: 40px;
padding-top: 5px;
padding-bottom: 5px;
But looks like it is a lot of playing around with pixels numbers to achieve the desired effect. Is there an easier way of tiling to achieve this effect.

If you don't want to mess with gradients, here is a simpler way, as I see there isn't actually a gradient in your image, but a two-tone button.
You can achieve this two-tone effect without altering the HTML by using the pseudo-element :before to add a 50% tall, transparent white div.
If you this method you actually have a reflection on your button, so text and icons inside it will also have that "shine" (example).
#login{
background:#444;
display:inline-block;
color:white;
padding:10px 60px;
border-radius:8px;
position:relative;
}
#login:before{
content:'';
width:100%;
height:50%;
background:rgba(255,255,255,0.2);
position:absolute;
top:0px;
left:0px;
}
DEMO: http://jsfiddle.net/ySTbB/

Use CSS3 and border radius
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
SRC: http://www.colorzilla.com/gradient-editor/

If this is the actual image you want to use as background, it would probably be a better idea to just use CSS:
input[type="submit"]
{
border: none;
border-radius: 5px;
background: linear-gradient(to bottom, #AAA 49%, #555 50%);
}

This will work, if button-slice.jpg is a 40px tall, 1px wide jpg "slice" of the background tile pattern.
.button {
display: inline-block;
width: 170px;
height: 40px;
line-height: 40px;
text-align: center;
background: url(button-slice.jpg) repeat-x;
border: 0;
border-radius: 8px;
text-decoration: none;
}
You could also forego images completely and use CSS3 gradients to create that background effect instead, which is probably a better solution if it's only intended for iOS.

Since you can use CSS3 I strongly suggest using it as such:
input[type="submit"] {
background: #3e3e3e;
background: -moz-linear-gradient(top, #616161 0%, #777777 50%, #3b3b3b 51%, #393939 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#616161), color-stop(50%,#777777), color-stop(51%,#3b3b3b), color-stop(100%,#393939));
background: -webkit-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -o-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: -ms-linear-gradient(top, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
background: linear-gradient(to bottom, #616161 0%,#777777 50%,#3b3b3b 51%,#393939 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#616161', endColorstr='#393939',GradientType=0 );
border-radius: 6px;
color: white;
min-width: 100px;
padding: 10px 15px;
text-align: center;
text-decoration: none;
}
It'll load a lot faster and render nicer on different DPI devices.

I would use a gradient background with an image as a backup for browsers that do not support gradient. The image bg will tile automatically and the border radius will ensure rounded corners.
DEMO http://jsfiddle.net/kevinPHPkevin/hSwJN/16/
#submit {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius:6px;
display: inline-block;
color: #000;
font-family:'Oswald';
font-size: 20px;
padding: 12px 24px;
border:none;
background:url('http://www.islandpoolnspa.com/More_info_button_background_rot_180.jpg');
background: rgb(76,76,76); /* Old browsers */
background: -moz-linear-gradient(top, rgba(76,76,76,1) 0%, rgba(89,89,89,1) 12%, rgba(71,71,71,1) 39%, rgba(44,44,44,1) 50%, rgba(0,0,0,1) 51%, rgba(17,17,17,1) 60%, rgba(28,28,28,1) 91%, rgba(19,19,19,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(76,76,76,1)), color-stop(12%,rgba(89,89,89,1)), color-stop(39%,rgba(71,71,71,1)), color-stop(50%,rgba(44,44,44,1)), color-stop(51%,rgba(0,0,0,1)), color-stop(60%,rgba(17,17,17,1)), color-stop(91%,rgba(28,28,28,1)), color-stop(100%,rgba(19,19,19,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(76,76,76,1) 0%,rgba(89,89,89,1) 12%,rgba(71,71,71,1) 39%,rgba(44,44,44,1) 50%,rgba(0,0,0,1) 51%,rgba(17,17,17,1) 60%,rgba(28,28,28,1) 91%,rgba(19,19,19,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4c4c4c', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}