I am attempting to make some nice looking, flexible arrow buttons with CSS only by using a rotate. Problem is that Firefox seems to position the arrow part slightly differently to all other browsers. Adding Firefox only styles can of course address this, but is there a more elegant way?
HTML as follows
<span class="arrow-box left">Previous button</span>
<span class="arrow-box right">Next button</span>
CSS is as follows
.arrow-box { line-height:34px; border:2px solid #7E95AF; padding:8px 20px; z-index:10; font-family:Arial; font-weight:bold; font-size:12px; border-radius:5px; background-color:#EEE; position:relative; }
.arrow-box.left { border-left:0; }
.arrow-box.right { border-right:0; }
.arrow-box.left::before,
.arrow-box.right::after { content:""; display:block; width:24px; height:24px; transform:rotate(45deg); -webkit-transform:rotate(45deg); z-index:-1; position:absolute; border-style:solid; border-color:#7E95AF; border-radius:5px; background-color:#EEE; }
.arrow-box.left::before { top:2px; left:-10px; border-width:0 0 2px 2px; }
.arrow-box.right::after { top:2px; right:-10px; border-width:2px 2px 0 0; }
Working version for Chrome, IE, Safari: http://jsfiddle.net/YWnzc/356/
Working version for Firefox: http://jsfiddle.net/YWnzc/352/
Yes your border-right width changes when the browser is Firefox, So i think you can use a function in javascript to detect the browser and do changes according to it.
you can do like this...
Javascript :
var isFirefox = typeof InstallTrigger !== 'undefined'; // Firefox 1.0+
if(isFirefox == true)
{
$('.arrow-box.right').toggleClass('changed');
}
CSS :
.arrow-box.right.changed:after { top:2px; right:-7px; border-width:2px 2px 0 0; }
I have called a changed css for .arrow-box.right , you can do changes for .arrow-box.left also if you want.
Check this fiddle in both Firefox and Chrome-> http://jsfiddle.net/YWnzc/360/
Related
I am trying to define a custom css button for my search form. I cant figure out why this particular button has a strange border around it? I need to get it removed but cannot figure out where it is coming from within the css..code and fiddle below.
/* Define Search Button */
button.button-search::-moz-focus-inner { padding:0; border:0; } /* FF Fix */
button.button-search { -webkit-border-fit:lines; } /* <- Safari & Google Chrome Fix */
button.button-search { position:absolute; right:10px; top:8px; }
button.button-search > span {
background: #3399CC; /* Old browsers */
box-shadow:1px 1px 0 #a4a4a4;
display:block;
float:none;
width:88px;
height:32px;
line-height:30px;
text-align:center;
font-size:15px;
color:#fff;
text-align:center !important;
}
button.button-search span span { padding:0; float:none; }
button.button-search:hover > span {
opacity:0.8 !important;filter:alpha(opacity=80) !important;
box-shadow:1px 1px 0 #a4a4a4;
}
.header .form-search button.button-search { }
.header .form-search button.button-search > span { }
.header .form-search button.button-search:hover > span { }
.header .form-search button.button-search span span { }
.header .form-search button.button-search:hover span {}
<div class="header">
<div class="form-search">
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button-search"><span><span>Search</span></span></button>
</div>
</div>
http://jsfiddle.net/fnysccad/
Thanks
You are applying the CSS to the spans inside the button, so the default styling for the button is still being used:
Get rid of all the messy <span>, and, as #Christoph said in the comments, type="submit" can be omitted, as it is the default functionality of a button:
<div class="form-search">
<button title="<?php echo $this->__('Search') ?>" class="button-search">Search</button>
</div>
Apply the CSS to the input:
button.button-search::-moz-focus-inner { padding:0; border:0; } /* FF Fix */
button.button-search { -webkit-border-fit:lines; } /* <- Safari & Google Chrome Fix */
button.button-search { position:absolute; right:10px; top:8px; }
button.button-search {
background: #3399CC; /* Old browsers */
box-shadow:1px 1px 0 #a4a4a4;
display:block;
float:none;
width:88px;
height:32px;
line-height:30px;
text-align:center;
font-size:15px;
color:#fff;
text-align:center !important;
border:none;/*Removes the border*/
}
http://jsfiddle.net/q3t2srfg/1/
Button has border, and background by default.
Remove them, and will be good.
But i dont think its valid to add span into button.
Solution is here: (css)
button.button-search { background: transparent; border: none; position:absolute; right:10px; top:8px; }
This is happening because of default style you need to override it by define your own class for example 'change':-
<button type="submit" title="<?php echo $this->__('Search') ?>" class="button-search change"><span><span>Search</span></span></button>
button.button-search.change{
border:0;
padding:0;
}
Updated fiddle :-http://jsfiddle.net/ynwypqw2/
Looks like solutions requiring a different html structure work for you. But to answer the original question, here's the css solution for getting a button to respect your custom styles:
button {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 0;
border: 0;
}
This tells Safari and Chrome (webkit), Firefox (moz), and standards-compliant browsers to not enforce their default button styles, and then makes sure there's no padding or border.
If you add the following code above your code, it will work:
button {
border: medium none;
margin: 0;
padding: 0;
}
This code reset some of the default styles in the browsers.
You need to do something like this, if i understood your question:
.button-search{border:0px;background-color:inherit;}
.button-search:focus{outline:none;}
use this .button-search{ border: 0; padding: 0; }
This question already has answers here:
Transparent arrow/triangle indented over an image
(4 answers)
Closed 8 years ago.
I'm trying to create a hollow css arrow in front of an image.
I got it… but it feels very dirty. Is there any better way to do this?
Cross browser compatibility (IE8+) would be awesome.
SCSS
.arrowwrap {
width:100%;
padding:0;
position:relative;
overflow:hidden;
margin:-$arrow_height 0 0 0;
&:after {
content:'';
position:absolute;
height:$arrow_height;
width:50%;
margin:-$arrow_height 0 0 -$arrow_width;
left:0;
z-index:99999;
background:$box_color;
}
&:before {
content:'';
position:absolute;
height:$arrow_height;
width:100%;
left:50%;
margin:0 0 0 $arrow_width;
z-index:99999;
background:$box_color;
}
.arrowone {
width: 0;
height: 0;
border-style: solid;
border-width: $arrow_height $arrow_width 0 $arrow_width;
/* border-color: transparent transparent #333 transparent; */
border-color:transparent $box_color $box_color $box_color;
margin:auto;
}
}
http://jsfiddle.net/dhs2eba2/
If you want to minimise and remove all unsemantic markup you can do :
DEMO
This technique relies on pseudo elements and therefore prevents the use of unsemantic markup. Pseudo elements are supported by IE8+ see canIuse. It also needs the box-sizing property to enable responsive width (box-sizing: border-box is also supported by IE8+ see canIuse).
HTML :
<div class="wrap">
<img src="http://placekitten.com/800/350" />
<article>
<h1>Hellow World, meow</h1>
</article>
</div>
CSS :
body {
background:#fad;
padding:0;
margin:0;
}
$arrow_width: 20px;
$arrow_height: 20px;
$box_color: #d3d030;
.wrap {
img {
width:100%;
height:auto;
vertical-align:bottom;
}
article{
padding:20px;
background:$box_color;
color:#fff;
position:relative;
}
}
article:before, article:after{
content:'';
position:absolute;
width:50%;
bottom:100%;
box-sizing:border-box;
}
article:before{
left:0;
border-bottom:20px solid #D3D030;
border-right:20px solid transparent;
}
article:after{
right:0;
border-bottom:20px solid #D3D030;
border-left:20px solid transparent;
}
Not sure about IE8, haven't got a copy on my VM, but you could approach it like this instead of pseudo elements
<div class="arrowborder">
<div class="arrrowwrap arrowwrapleft"></div>
<div class="arrrowwrap arrowwrapright"></div>
</div>
.arrrowwrap {
box-sizing:border-box;
width:50%;
z-index:9999999;
float:left;
}
.arrowwrapleft {
border-right: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
.arrowwrapright {
border-left: $arrow_width solid transparent;
border-bottom: $arrow_height solid $box_color;
}
http://jsfiddle.net/dhs2eba2/8/
For the following facebook like button, there is a # of likes bubble (?) on the right of the button (see below - the bubble with the text of '3.5k' on it)
The question is - was it drawn using css? How to create it?
Fiddle Link : http://jsfiddle.net/zEVbe/1/
Yes, that bubble can be drawn by CSS in various way. One of the way is written below.
HTML :
<div class="like">Like</div>
<div class="counter">3.5k</div>
CSS :
body{
font-family:Calibri;
}
.like{
background:#3b5998;
padding:0px 10px;
border-radius:2px;
color:#fff;
cursor:pointer;
float:left;
height:25px;
line-height:25px;
}
.like:hover{
background:#444;
}
.counter{
background:#fafafa;
border:1px solid #aaa;
float:left;
padding:0px 8px;
border-radius:2px;
margin-left:8px;
height: 23px;
line-height:23px;
}
.counter:before{
display:block;
float:left;
content:' ';
width:6px;
height:6px;
background:#fafafa;
margin-left:-12px;
border-right:10px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
margin-top:8px;
border-left:1px solid #aaa;
border-bottom:1px solid #aaa;
}
I have this CSS. the property FILTER In class .crumb make my background and this works perfectly and Chrome, Firefox, safari, iPad, iPhone,Android... but for an unknown reason. It just doesnt work on ie9. I see the dark bordes with a radius, but the background is just completly square.
.left-crumb {
margin-left:15px;
-webkit-border-top-left-radius:5px;
-webkit-border-bottom-left-radius:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-bottomleft:5px;
border-top-left-radius:5px;
border-bottom-left-radius:5px;
}
.crumb {
margin-top:20px;
margin-bottom:10px;
background-image:0 color-stop(0.3,#798aad), color-stop(0.51,#6276a0), color-stop(0.51,#556a97), color-stop(0.75,#566c98), to(#546993));
background:linear-gradient(top,#4c4c4c0%,#59595912%,#66666625%,#47474739%,#2c2c2c50%,#00000051%,#11111160%,#2b2b2b76%,#1c1c1c91%,#131313100%);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4c4c4c',endColorstr='#131313',GradientType=0);
font-weight:bolder;
border:solid 1px #54617D;
height:30px;
padding-left:10px;
padding-right:10px;
display:inline-block;
color:#FFF;
line-height:28px;
border-color:#484E59 #aaa #4C5C7A #54617D;
}
.right-crumb {
position:relative;
margin-right:10px;
padding-right:25px;
-webkit-border-top-right-radius:15px;
-webkit-border-bottom-right-radius:15px;
-moz-border-radius-topright:15px;
-moz-border-radius-bottomright:15px;
border-top-right-radius:15px;
border-bottom-right-radius:15px;
}
Here's a quick HTML so you can test.
<div id="adminPanel"><a class="left-crumb crumb right-crumb" href="admin.php">Admin panel</a></div>
adminPanel is just a div to contain all
Still IE9 doesn't supports yet, but you can use SVG to achieve this, please download the source code and check the demo here
http://css3wizardry.com/2010/10/29/css-gradients-for-ie9/
i can't figure out what makes an html button element appear to be pushed (right click an html button and then hover on and off to see what i mean).
the following two examples i've taken from other websites. the first has the typical button push effect. the second does not.
.button {
border:none 0;
background-color:Transparent; }
.button .l { background:url('img.gif') no-repeat 0 0;
padding-left:7px;
display:block;
height:32px; }
.button .c { background:url('img.gif') repeat-x 0 0;
display:block;
height:32px;
padding-top:7px; }
.button .r {
background:url('img.gif') no-repeat right top;
padding-right:7px;
display:block;
height:32px; }
and
.button {
background:#F0F0F0 url(img.gif) repeat-x scroll 0 0;
border:1px solid Black;
color:#333333;
font-size:12px;
height:20px;
padding-left:8px;
padding-right:8px; }
EDIT: # mr skeet, i want a button that will look the same in all browsers (ie. background image) but still behave like a real html button with the push effect. am i correct in assuming that i'll need javascript for this? and different css for the push state? an example/tutorial would be awesome
Either use
<input type="button" value="Click Me"/>
which will automatically act like a button, or use the :hover and :active CSS pseudo classes to get what you want...
a.likeAButton {
background-color:#67a0cf;
border:1px outset #2683cf;
color:#fff;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:hover {
background-color:#5788af;
border:1px outset #2683cf;
color:#fcffdf;
padding:3px 3px 3px 3px;
margin:1px;
text-decoration:none;
}
a.likeAButton:active {
background-color:#67b4cf;
border:1px inset #1d659f;
color:#e0ffaf;
padding:4px 2px 2px 4px;
margin:1px;
text-decoration:none;
}
Fake Button
you can also add border radius to every element such as a.likeabutton, a.likeabutton:hover and all. this wil give it a good look. If we can make it like a list of Button then it will have a better Navbar feature, I tried this though, it position of these buttons does no remain same in Maximized and restored borwser.