I'm looking at the buttons used on twitter's home page, specifically the big orange 'signup' button. I see it is defined like this:
<p id="signup-btn">
<a id="signup_submit" href="/signup">
<span>Sign Up</span>
</a>
</p>
are they just using css to give the orange button appearance (which may just be a jpg), and also using css to specify the roll-over appearance (another jpg), and finally a third state for mouse-click (another jpg) to give the impression of a real clickable button?
If that's how it works, what should I look for to do the same thing? In my case I just want to make a button I guess, like:
<div class='mybutton'>Hello!</div>
.mybutton {
bgcolor: red;
bgcolor-mouseover: yellow;
bgcolor-mousedown: green;
}
yeah something like that would be great,
Thanks
Look at their CSS:
background: #FA2 url(http://s.twimg.com/a/1275412898/images/fronts/bg-btn-signup.png) repeat-x 0px 0px;
border: 1px solid #FA2;
border-bottom-left-radius: 5px 5px;
border-bottom-left-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-bottom-right-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-left-radius: 5px 5px;
border-top-right-radius: 5px 5px;
border-top-right-radius: 5px 5px;
color: #333;
display: block;
font: normal normal bold 18px/normal Arial, sans-serif;
padding: 8px 10px;
text-align: center;
text-decoration: none;
text-shadow: #FE6 0px 1px 0px;
Haven't looked at it specifically, but that is entirely possible with CSS; they probably have a named style using the #signup-btn designation in CSS. To find out, you can use IE or FireFox with FireBug to examine the CSS and see exactly what they do for the button style. I would highly recommend that.
HTH.
I'd use a BUTTON element and CSS sprites. That way, you can style it however you like, and don't have to screw around with click() events in JS. Just use it wherever you'd use a regular button in a form.
EDIT: Coronatus, you should probably read this: Rediscovering the Button Element. They're remarkably easy to make visually consistent across browsers using a little CSS.
Related
Any ideas on how i can execute this?
button {
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);}
i have tried to add "body .contact button" to let css file know it is the contact us page i am editing but it wont work it only goes to change the style on my other pages aswell so essentially.
body .contact button {
background:
but this doesnt work, any ideas how i can change the style of this button without affecting the others in my css file?
The .contact does not mean the contact page but instead refers to a class called contact.
You could give each of the buttons a different class for example if you wanted one to be red and the other blue:
HTML page 1:
<button class="button-red">This is a red button</button
HTML page 2:
<button class="button-blue">This is a red button</button
CSS file:
.button-red {
background-color: red;
}
.button-blue {
background-color: blue;
}
Just change the colours to your own styling.
Hope this helps.
You really need to search online for 'CSS selectors' and learn how and why to use them.
An example: create CSS rules that are true for all button and create exceptions to those rules using specific selectors. E.g. all buttons are green, except a contact button is red.
The generic rules can be put in a separate CSS file and <link>ed in a document. Create the specific rules in-document with a <style> block to override/modify/add to the linked generic rules.
There are many alternative ways to solve your issue, this is just one of them...
Tip: CSS rules are nothing more than an eleborate list of logical statements varying from easy to virtually unexplicable selectors to modify the style of your document:
if selector,
list-of-selectors,
very-special-selectors
what-does-this-one-do?!?-selector then { property: value }
example
/* put this in an external CSS file */
button { background-color: green }
/* put this in a <style> block */
button.contact { background-color: red }
<button>generic 1</button>
<button>generic 2</button>
<button>generic 3</button>
<br>
<button class="contact">contact</button>
Suppose we have a button
<button> your text </button>
and we ave to use this CSS/style
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
so, we will add a id to button like
<button id="contact-btn"> your text </button>
and then add style using id selector
#contact-btn{
background: #1c00b5;
width: 100px;
border: none;
outline: none;
color: #fff;
height: 35px;
border-radius: 30px;
margin-top: 20px;
box-shadow: 0px 5px 15px 0px rgba(28,0,181,0.3);
}
it will work thanks
Situation and problem description
I'm currently working on mobile optimization of a web page according to hints given from Google Developer's PageSpeed Insights Tool and I get a lot of warnings about tap targets being too close to each other. The problem is: PageSpeed sees multiple tap targets when there's just one intended to be.
Example
PageSpeed Output (simplyfied):
The tap target <span class="glyphicon"> is close to 1 other tap targets.
The tap target <span class="badge"> is close to 1 other tap targets.
corresponding CSS/HTML (simplified):
.glyphicon::before {
content: "x"; /* substitute for same size shopping cart symbol of custom font*/
}
.badge {
background-color: #999;
border-radius: 10px;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: 700;
line-height: 1;
min-width: 10px;
padding: 3px 7px;
text-align: center;
vertical-align: baseline;
}
a {
text-decoration: none;
border-color: #000;
border-radius: 3px;
border-style: solid;
border-width: 1px;
margin: 1px 2px;
padding: 5px 8px;
}
<a href="//some.where">
<span class="glyphicon"></span> <span class="badge">21</span>
</a>
Question
You can see easily that the intention is to have one tap target which is the link, consisting of two (or in similar cases more) HTML elements.
What can I do to make Google's PageSpeed to recognize just the parenting link for a tap target and ignore it's children?
You're wrapping the anchor element around two inline elements. If you wrap it around a block level element, like a div, you'll have one block level link instead of multiple inline links. You'll also have the advantage of being able to size the tap target in terms of height and width to optimize the tap target for Google.
The devil is in the details, and we don't seem to have any hint on why PageSpeed interprets the individual <span> elements within the <a> as tap targets, as it was already mentioned there could be event handlers bound to the elements triggering this warning.
With that disclaimer, I will assume PageSpeed does in fact warn you about structures like
<a href=#>
<span class=glyph>..</span> <span>..</span>
</a>
So I'll focus on removing elements from it, as to prevent the symptoms (I truly don't believe PageSpeed nags about inline markup within an anchor).
.glyph::before {
content: "x";
margin: 0 1ex 0 0; /* hated to see again */
}
.badge {
background-color: #999;
border-radius: 10px;
color: #fff;
display: inline-block;
font-size: 12px;
font-weight: 700;
line-height: 1;
min-width: 10px;
padding: 3px 7px;
text-align: center;
vertical-align: baseline;
}
a {
text-decoration: none;
/* Tip: Use shorthand to define, full property to override */
/*
border-color: #000;
border-style: solid;
border-width: 1px;
*/
border: 1px solid #000;
border-radius: 3px;
margin: 1px 2px;
padding: 5px 8px;
/* prevent lines from wrapping, removes the need for */
white-space: nowrap;
}
<a href="//some.where" class="glyph">
<span class="badge">21</span>
</a>
What this does is move around some logic, reducing the amount of elements needed to style it. (With some added tips in the comments)
This should remove the .. is close to 1 other tap targets warnings, as these elements are simply removed.
I need a little help with my problem. I get following effect with this code:
#navLink{
font-family: oduda_bold;
font-size: 17px;
color: #fff;
text-decoration: none;
}
#navLink:focus{
border-radius: 10px;
border-style: solid;
border-width: 0px;
background-color: #ef5e99;
}
WRONG HIGHLIGHT
and I would like to have it highlighted like this:
NICE HIGHLIGHT
Is that possible to highlight link with larger (than its textvalue) area ?
Yes. Add padding and then fiddle around with the border radius until it meets your expectations:
#navLink:focus{
padding: 10px /*here*/
border-radius: 30px;
}
You need to use padding and set your link into an inline-block.
#navLink{
display:inline-block;
padding: 10px;
}
It seems I must have read every article and guide to using border-image that there is on the web, and have tried just about every suggestion possible, yet it still isn't displaying! It's destined for a ul of class "navbox", and the full CSS for that element is below.
ul.navbar {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(C:\Users\imamadmad\Documents\Web Stuff\Locomotion Coffee\border.png);
border-image-outset:4px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
I feel I have tried every possible combination of the border-image property, and even used both a .png and a .jpg version of the file, yet nothing displays. I've even removed the other border styling completely, but replaced it when that didn't make the border-image appear as I still needed some sort of border! I'm not sure if it would have anything to do with the fact that I'm calling the entire document and all files associated with it through my computer rather than through the web, as I need to make a mock-up on my own computer before I can put it online. However, everything else, including other images, are displaying just fine. It is neither displaying in Chrome nor IE, and Firefox just doesn't want to show any CSS at all, so that's unhelpful. I have tried adding the -webkit- etc. tags to the properties, but they made no difference either and besides, it shouldn't need it for the latest version of Chrome, which I'm running.
Please, can anyone help me! While it's not vital to the design, it would really just make it that much easier on the eyes.
Works fine. Check your image url
FIDDLE DEMO
ul {
float: right;
list-style-type: none;
background-color: #F8F8F8;
border-style: solid;
border-width: 4px;
border-color: #231F20;
color: #1F1F1F;
margin: 25px 5px 5px 5px;
height: 50px;
position: absolute;
left: 450px;
right: 20px;
vertical-align:middle;
border-image-source: url(http://i46.tinypic.com/10gljba.jpg);
border-image-outset:2px;
border-image-width:4px;
border-image-slice:8;
border-image-repeat:repeat;
}
Hope this is what you are looking for
Edit : FIDDLE Updated
Ok, I'm quite new to CSS3. I have this code:
<div class="Mat-Shadow-Box-Text">
<div class="Mat-Shadow-Box-TextBleu2">
MyText
</div>
</div>
That works great. But then I want to change Mat-Shadow-Box-TextBleu2 for Mat-Shadow-Box-Text2. Same CSS class copy/pasted with 0 change (wanted to test before changing anything).
.Mat-Shadow-Box-Text
{
margin: 0px 0;
border-radius: 20px;
box-shadow: 10px 10px 20px #888;
behavior: url(ie-css3.htc);
}
.Mat-Shadow-Box-TextBleu2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
.Mat-Shadow-Box-Text2
{
border-radius: 20px;
border-width: 3px;
border-style: solid;
border-color: #888;
padding-left: 18px;
padding-bottom: 15px;
padding-top: 15px;
}
Now my 100$ question is: Why when I change the class name in my tag, it doesn't work? (the border doesn't appear on the web page). Also, I tried just renaming .Mat-Shadow-Box-TextBleu2 by .Mat-Shadow-Box-Text2 (in both CSS class and DIV code) and it doesn't work either!
So, to summarize, my original code works fine, but I can't rename nor change to another class in my second DIV tag. Note that I don't have this problem with my first DIV class. I can rename .Mat-Shadow-Box-Text or point to a different class and it works just fine.
Cheers!
When in dev its always a good practice after changing Back-End Code, CSS, or HTML to always Ctrl+F5 to refresh your browser to force it to get everything again from the server. That seems to be what you have happening here. Its especially noticeable with CSS changes.