Edit : added Codepen
I have a small issue with my css, there us a weird space between border-image and linear background on the top and the left of a button. Could you help me to remove it please? Thank you for your help.
Here is the codepen. The problem is on the button "text". I seems like the problem appears only on certain levels of zoom on Chrome : https://codepen.io/zamehan/pen/ZMXWeg
Here is the associated css, the button has the class .special-button :
.special-button{
background: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) no-repeat ;
color:#616060;
border: 1px solid transparent;
border-image: linear-gradient(to right, #ececec 0%,#ececec 50%, #ececec 50%,#f1d0c1 50%,#f1d0c1 100%) 5 !important;
}
.color-button {
font-family: "Noxa";
flex: 1 100%;
margin: 6px;
font-weight: 700;
letter-spacing: 0.8px;
}
button {
color:white;
border: none;
text-align: center;
text-decoration: none;
padding: 6px 11px;
font-size: 12px;
margin: 4px 5px;
background-position: center;
cursor: pointer;
&[data-color="dark"] {
$color: #616060;
color: $color !important;
&[data-selected="true"] {
color: lighten($color, 10%) !important;
}
}
border: 1px solid transparent;
}
I ran into this problem too, and found the following article:
https://css-tricks.com/the-backgound-clip-property-and-use-cases/
I set the background-clip property of the element with the linear-gradient to "padding-box" and the line/space went away.
Related
I'm trying to create a button that has two colors as a border.
The two colors i need used are blue: #00a7e1, orange: #f6531d.
I would like to just use css if possible.
Thank in advance!
link to button concept
Example:
.btn
{
border: 0;
padding: 4px;
display: inline-block;
background: linear-gradient(20deg, #00a7e1 49%, #e65300 50%);
}
.bg
{
background: #349645;
padding: 8px 14px;
font: bold 24px Consolas;
}
.btn:active .bg
{
background: #0a1117;
color: #ffffff;
}
<div class="btn"><div class="bg">YOU'R TITLE</div></div>
<button class="btn"><div class="bg">YOU'R TITLE</div></div>
You may also play with gradient and background-clip (see comments in CSS)
button {
vertical-align: top;
border: 5px solid transparent;/* give extra space for gradients colors */
font-size: 2.5rem;
margin: 0.25em;
padding: 0.5em 2em;
background: linear-gradient(#333, #333),/* black turned into gradient to hold with background-clip and hide the 2 color gradient under it */
linear-gradient(/* 2 colors to draw under the borders also via background-clip*/
to bottom left,
rgb(230, 83, 0) 50%,
gray 51%,
rgb(0, 166, 224) 40%
)
no-repeat center center;
background-clip:
padding-box, /* drawn inside including padding area */
border-box;/* drawn also under borders */
background-size:
100% 100%,
110% 150%;/* must be bigger than 100% so it include also borders, else it repeats */
color: white;
box-shadow: 0 0 2px 2px black, inset 0 0 2px black;/* did you want this too ? */
}
<button>BUTTON</button> <button> TO</button> <button> PLAY</button>
If you think this is too much, you also have border-image .
Simply use border-image with a gradient:
button {
padding:20px;
border:5px solid;
border-image:linear-gradient(60deg,#00a7e1 50%,#f6531d 0) 20;
background:transparent;
}
<button>some text</button>
I'm trying to make interactive cart buttons using CSS stylings. I want my "add to cart" button to invert colors (black n white only) on hover to enhance user experience.
CSS style:
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
ryanAddButton:hover {
background-color:white;
color:black;
}
HTML snippet of the button:
<p class ="ryanAddButton">Add to Cart</p>
Your original background shorthand uses a gradient which is interpreted as a background-image and so your hover declaration does not override that property.
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
/*
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
*/
background: black;
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background-color: white;
color: black;
}
<p class="ryanAddButton">Add to Cart</p>
First of all, there's a slight typo in your CSS.
Solution 1 : (A simple one - a layman's solution) :
Secondly, Paulie_D's answer is correct. However, just as another viewpoint, if you apply the background property, why not change the same property on hover :
.ryanAddButton {
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1"Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover {
background:white;
color:black;
border: 1px solid #ccc;
}
<p class="ryanAddButton">Add to Cart</p>
Solution 2 : (A better solution - a designer/programmer's solution) :
Your background property makes use of linear gradient. However, since both the colors are same, the use of linear gradient becomes redundant. Instead, you can get the color by making use of the background-color property. This is beneficial since you wouldn't need to use vendor prefix and at the same time the browser support would be much better on older browsers.
At the same time, it reduces several lines of code by just one :
background-color : black;
Hope this helps!!!
Change the background gradient in the ".ryanAddButton" for black, and you miss the dot for class in "ryanAddButton:hover", should be ".ryanAddButton:hover"
Your background uses a gradient, which overlays the background colour. So even if you change the background colour behind the gradient, you won't see the change. You can override it by setting the entire background property, which will remove the gradient while also setting the background colour.
.ryanAddButton:hover{
background:white; /* overrides all background properties */
color:black;
}
You're also missing a . in your hover selector.
.ryanAddButton{
display: inline-block;
padding: 8px 0px;
width: 390px;
background: -moz-linear-gradient(#000, #000);
background: -o-linear-gradient(#000, #000);
background: -webkit-linear-gradient(#000, #000);
background: linear-gradient(#000, #000);
color: #fff;
font: normal 700 20px/1 "Calibri", sans-serif;
text-align: center;
text-shadow: 1px 1px 0 #000;
}
.ryanAddButton:hover{
background:white;
color:black;
}
<p class ="ryanAddButton"> Add to Cart</p>
I'm trying to create a button with CSS that will sit on a semi-transparent background that has a beveled or cut edge to it. Here is the Photoshop mockup:
I'm able to do this successfully with a solid color background because I can use an pseudo element with that same background and "cover" the edge of the button, but it doesn't work with a semi-transparent background.
Here's what I've got so far, on a solid background: http://codepen.io/anon/pen/GJFpc
I'm beginning to believe this isn't possible with just CSS, but still hoping S.O. can save me once again!
I love a good css challenge so I tried a few things and this is what I could come up with:
http://jsfiddle.net/QE67v/3/
The css (unprefixed) looks like this:
a.cta {
position: relative;
float: left;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset 0 -2px 1px 2px #fff;
line-height: 16px;
height: 16px;
z-index: 2;
}
a.cta:after {
content: '';
display: block;
position: absolute;
width: 32px;
height: 32px;
right: -16px;
top: 0;
background-image: linear-gradient(top, #ffffff 0%, #e4e4e4 100%);
box-shadow: inset -3px -2px 1px 2px #fff;
transform: skewX(-45deg);
z-index: -1;
}
There are two main differences with your code:
I use a inset box-shadow to achieve the white 'bevel'. You could
probably do this with gradients as well, but I just find the shadows
more intuitive.
In stead of making the button wider and covering the bottom left
corner with a pseudo element in the color of the background, I kept
the button in its normal width and added a pseudo element to which a
applied the skewX transformation. This allows for any background, as
you can see by the gradient I set as a background in my fiddle.
I believe this is what you where after. Feel free to ask if you need any further help/explanation.
I'm trying to get this to work but there's still something not right.
I want to style the submit buttons with css to match the ones i already have.
<input type="submit" name="save_settings" value="Opslaan">
Style:
input[type="button"], input[type="submit"], button
{
background: url("http://gasterijdebakker.nl/email/php/pages/images/layout/bg-btn-left.png") no-repeat scroll left top transparent;
display: inline-block;
line-height: 35px;
padding:7px 0 15px 12px;
margin:0;
border:0;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
}
jsFiddle
You would be better off not using the background image and using css3 gradient instead. Something like:
input[type="button"], input[type="submit"], button
{
background-color: #a3d4ff;
background-image: -webkit-gradient(linear, left top, left bottom, from(#a3d4ff), to(#88bcf2));
background-image: -webkit-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -moz-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: -o-linear-gradient(top, #a3d4ff, #88bcf2);
background-image: linear-gradient(to bottom, #a3d4ff, #88bcf2);
border-radius:3px;
display: inline-block;
line-height: 22px;
padding:7px 12px;
margin:0;
border: 1px solid #88bcf2;
color: #FFFFFF;
font-size: 15px;
font-weight: bold;
letter-spacing: -1px;
text-shadow: 0 1px 1px #70A7E0;
cursor:pointer;
}
input elements can't be styled completely.
Instead, use a button element.
button elements are much easier to style than input elements. You can add inner HTML content (think em, strong or even img), and make use of :after and :before pseudo-element to achieve complex rendering while input only accept a text value attribute.
source:
Mozilla Developer Network
https://developer.mozilla.org/en-US/docs/HTML/Element/button
Okay first the code..
<td class="btnSaveBooking">
<div class="btnSaveBookingContainder">
<div id="save">
<span class="btnImage"></span><span class="btnsavebookingspan">
<input type="submit" style="color:White;background-color:#6086AC;border-color:White;border-width:2px;border-style:Solid;font-family:Verdana;font-size:10pt;font-weight:bold;" id="btnSaveBooking" value="" name="btnSaveBooking">
(F8)</span></div>
</div>![enter image description here][1]
</td>
The images
Normal
OnMouseOver at the button
OnMouseOver at the imaage
As you can see, when user hovers exactly over the image, then only is the background of image changing, what I want is, when user even hovers over this button, the image should change.
Here's the css
.btnSaveBooking {
border-top: 1px solid #7abbde;
background: #1776a6;
background: -webkit-gradient(linear, left top, left bottom, from(#7ec5e8), to(#1776a6));
background: -webkit-linear-gradient(top, #7ec5e8, #1776a6);
background: -moz-linear-gradient(top, #7ec5e8, #1776a6);
background: -ms-linear-gradient(top, #7ec5e8, #1776a6);
background: -o-linear-gradient(top, #7ec5e8, #1776a6);
padding: 2px 20px 3px 4px;
-webkit-border-radius: 11px;
-moz-border-radius: 11px;
border-radius: 11px;
-webkit-box-shadow: rgba(0,0,0,1) 0 1px 0;
-moz-box-shadow: rgba(0,0,0,1) 0 1px 0;
box-shadow: rgba(0,0,0,1) 0 1px 0;
text-shadow: rgba(0,0,0,.4) 0 1px 0;
color: #f7f7f7;
font-size: 17px;
font-family: Georgia, Serif;
text-decoration: none;
vertical-align: middle;
}
.btnSaveBooking:hover {
border-top-color: #000000;
background: #7288c9;
color: #ffffff;
}
.btnSaveBooking:active {
border-top-color: #3c637d;
background: #3c637d;
}
#save .btnImage
{
background: url("../images/save.png") no-repeat scroll 2px 5px transparent !important;
border-color: transparent !important;
height: 24px;
position: relative;
width: 28px;
margin: 1px 1px 1px 10px;
padding: 4px 2px 0 20px;
}
#save .btnImage:hover
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor: pointer;
}
You just need to change where the text ':hover' appears in your rule. As it stands, the img itself needs to be hovered. Change the rule so that when it's parent is hovered it changes.
I.e
#save .btnImage:hover
becomes
.btnSaveBooking:hover .btnSaveBookingContainder .btnImage
This way, the image changes as the button's background does. The answer already given gives you a 'two-stage' approach to the change.
Please try this:
.btnSaveBookingContainder:hover .btnImage
{
background: url("../images/saveN.png") no-repeat scroll 2px 5px transparent !important;
cursor:pointer;
width:28px;
height:31px;
}
remove the #save .btnImage:hover css from your existing css, and try with the following style format,
.btnSaveBooking:hover{
/* over border, background & text color */
}
.btnSaveBooking:active
{
/* active border, background & text color */
}
.btnSaveBooking:hover #save .btnImage{
/* provide your hover image style */
}
.btnSaveBooking:active #save .btnImage{
/* provide your active image style */
}