I'm making a web page (lots of them that are connected)
I have added the glow function/attribute to my buttons in CSS. The thing is I've used this;
button:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
The thing is, my CSS file is linked and being used by 5 different HTML files and more are coming. So instead of just getting the glow effect on just 4-5 buttons that I have on one HTML page, the glow function now is on all buttons on all other HTML pages.
How do I avoid this, I cant add the glow function inside the #id's can I?
My buttons like like this in css
#TrafficJam1 {
position: absolute;
top: 1120px;
left: 20px;
height:107px;
width: 278px;
}
That's just one of them
Here's the HTML part of that particular one,
<input type="image" src="TrafficJam.jpg" id="TrafficJam1">
I have to use this code because my buttons are images.
Give the buttons you want to apply this CSS to a class like this:
<input type="image" src="TrafficJam.jpg" id="TrafficJam1" class="glow">
A class is another identifier for html elements. But it's different from id in the sense that you may use them to target multiple elements at a time. So you can just give the buttons you want this effect on the same class and target that class in your CSS like this:
.glow:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Then a little bit off topic. The thing you're asking is pretty basic stuff. So I get it that you're beginner at HTML and CSS, right? In case you are it would be wise to learn some more HTML and CSS with an online learning tool like codecademy.com.
Create a new stylesheet and link this in the page where you want the buttons to glow.
This is easily done by using the <link> tag, but I guess you are familiar with that.
In that file you could just add the code you were using:
.classname:hover {
border: 80px solid #ffffff;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
-webkit-box-shadow: 0px 0px 4px #ffffff;
-moz-box-shadow: 0px 0px 4px #ffffff;
box-shadow: 0px 0px 4px #ffffff;
}
Can u tell me what is wrong with my code?Why there is no shadow on image?
Here is my code:
HTML
<div class="wrapper">
<img src="http://i.imgur.com/aVt9qPi.png"/>
</div>
CSS
div.wrapper img{
-moz-box-shadow:inset 1px 2px 18px #000000;
-webkit-box-shadow:inset 1px 2px 18px #000000;
box-shadow:inset 1px 2px 18px #000000;
}
U can find working demo here
you cannot apply shadow inset effect directly on image. Better apply it on the div.
Check the DEMO.
div.wrapper{
-moz-box-shadow:inset 1px 2px 18px #000000;
-webkit-box-shadow:inset 1px 2px 18px #000000;
box-shadow:inset 1px 2px 18px #000000;
}
div.wrapper img{
position:relative;
z-index:-1;
}
Inset shadows do not work on image tags, but you can wrap your img in a parent element to achieve the same effect.
See this solution for an example.
I have the following code to create a border around all images as well as hover effects, but how do I disable this on selected images (ie. social buttons or logo)
img {
padding: 5px;
border: solid 1px #EFEFEF;
}
a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999;
}
you could add a class to the image that you want/dont want to have the borders, then style them differently by using their class in the css instead.
You should write in css the full path to the image,for example
div.hover-img ul li p a:hover img {
border: solid 1px #CCC;
-moz-box-shadow: 1px 1px 5px #999;
-webkit-box-shadow: 1px 1px 5px #999;
box-shadow: 1px 1px 5px #999; }
This additional class .hover-img and the path to the image helps you identify only the images you need to be bordered in hover position.
add a seperate class
.noshadow{ border:none; box-shadow:none}
Add this class to the element where you don't required the box-shadow and border
use the css not selector
like this
html markup
<div>
<img src="http://images03.olx.in/ui/3/20/99/45761199_1.jpg" alt="not found"/>
<img src="http://i1-news.softpedia-static.com/images/news2/Facebook-Changes-Font-Size-Users-Grab-Their-Pitchforks-2.jpg" alt="not found" class="noborder"/>
</div>
css
img:not(.noborder) {
border: 2px solid red;
}
see the Documentation and use here
Demo Fiddle
I am trying to do some CSS to complement my HTML code. I am effectively trying to make a little box which changes size based on the amount of text there is. Currently, this is what it looks like in action.
Essentially, I'd like it to form a little box around the text. Notice the last 'box' in the image, if the string is too long, it cuts it off and continues on the next line.
Included is the CSS code and an example of usage.
<style type="text/css">
boxytest
{
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
}
</style>
<body>
<div align="center">
<boxytest> Hey guys! What's up? </boxytest>
</div>
</body>
Any help is greatly appreciated.
As chipcullen says inventing your own element is probably not the best way to go about this. But to answer your question the key style decleration your missing appears to be display:inline-block;
jsfiddle here
Well, I think first off, in terms of markup, you want to make boxytest a class, and not create a new element. And don't use 'align=center'. It's a pain to maintain.
I would do something like this:
<body>
<p class="boxy">Test sentence</p>
<body>
The in CSS:
.boxy {
padding: 10px;
text-align: center;
line-height: 400%%;
background-color: #fff;
border: 5px solid #666;
-webkit-border-radius: 30px;
-moz-border-radius: 30px;
border-radius: 30px;
-webkit-box-shadow: 2px 2px 4px #888;
-moz-box-shadow: 2px 2px 4px #888;
box-shadow: 2px 2px 4px #888;
/* to prevent word wrapping */
white-space: nowrap;
overflow: hidden;
}
The last bit is based on this post.
I have this button image:
I was wondering whether it would be possible to make a simple
some words
and style that link to appear as that button?
If it is possible, how do I do that?
Using CSS:
.button {
display: block;
width: 115px;
height: 25px;
background: #4E9CAF;
padding: 10px;
text-align: center;
border-radius: 5px;
color: white;
font-weight: bold;
line-height: 25px;
}
<a class="button">Add Problem</a>
http://jsfiddle.net/GCwQu/
Check Bootstrap's docs. A class .btn exists and works with the a tag, but you need to add a specific .btn-* class with the .btn class.
eg: <a class="btn btn-info"></a>
you can easily wrap a button with a link like so <button>my button </button>
Something like this would resemble a button:
a.LinkButton {
border-style: solid;
border-width : 1px 1px 1px 1px;
text-decoration : none;
padding : 4px;
border-color : #000000
}
See http://jsfiddle.net/r7v5c/1/ for an example.
Try this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Button Tags</h2>
Link Button
<button type="button" class="btn btn-info">Button</button>
<input type="button" class="btn btn-info" value="Input Button">
<input type="submit" class="btn btn-info" value="Submit Button">
</div>
You can use the a href tag line from there.
Button Text
If you'd like to avoid hard-coding a specific design with css, but rather rely on the browser's default button, you can use the following css.
a.button {
-webkit-appearance: button;
-moz-appearance: button;
appearance: button;
}
Notice that it probably won't work on IE.
None of other answers shows the code where the link button changes its appearance on hover.
This is what I've done to fix that:
HTML:
My button
CSS:
.link_button2 {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: solid 1px #1A4575;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
background: #3A68A1;
color: #fee1cc;
text-decoration: none;
padding: 8px 12px;
text-decoration: none;
font-size: larger;
}
a.link_button2:hover {
text-decoration: underline;
background: #4479BA;
border: solid 1px #20538D;
/* optional different shadow on hover
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 1px 1px rgba(0, 0, 0, 0.4);
*/
}
JSFiddle:
https://jsfiddle.net/adamovic/ovu3k0cj/
You have got two options for consistency.
Use framework-specific tags, and use them throughout the website.
Use JavaScript to emulate a link on a button element, and then have the button consistent with browser's buttons look. Those css button-look hacks will never be accurate.
.
<button onclick="location.href = 'Homepage.html'; return false;">My Button</button>
return false; is to prevent the default behavior of the button being clicked.
Use the background-image CSS property on the <a> tag
Set display:block and adjust width and height in CSS
This should do the trick.
Yes you can do that.
Here is an example:
a{
background:IMAGE-URL;
display:block;
height:IMAGE-HEIGHT;
width:IMAGE-WIDTH;
}
Of course you can modify the above example to your need. The important thing is to make it appear as a block (display:block) or an inline block (display:inline-block).
For basic HTML, you can just add an img tag with the src set to your image URL inside the HREF (A)
<img src="http://problemio.com/img/ui/add_problem.png" />
You can create a class for the anchor elements that you would like to display as buttons.
Eg:
Using an image :
.button {
display:block;
background: url('image');
width: same as image
height: same as image
}
or using a pure CSS approach:
.button {
background:#E3E3E3;
border: 1px solid #BBBBBB;
border-radius: 3px 3px 3px 3px;
}
Always remember to hide the text with something like:
text-indent: -9999em;
An excellent gallery of pure CSS buttons is here
and you can even use the css3 button generator
Plenty of styles and choices are here
good luck
Just take regular css button designs, and apply that CSS to a link (in exactly the same way as you would to a button).
Example:
Some words
<style type="text/css">
.stylish-button {
-webkit-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
-moz-box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
box-shadow:rgba(0,0,0,0.2) 0 1px 0 0;
color:#333;
background-color:#FA2;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border:none;
font-size:16px;
font-weight:700;
padding:4px 16px;
text-shadow:#FE6 0 1px 0
}
</style>
Like so many others, but with explanation in the css.
/* select all <a> elements with class "button" */
a.button {
/* use inline-block because it respects padding */
display: inline-block;
/* padding creates clickable area around text (top/bottom, left/right) */
padding: 1em 3em;
/* round corners */
border-radius: 5px;
/* remove underline */
text-decoration: none;
/* set colors */
color: white;
background-color: #4E9CAF;
}
<a class="button" href="#">Add a problem</a>
Tested with Chromium 40 and Firefox 36
<a href="url" style="text-decoration:none">
<input type="button" value="click me!"/>
</a>
for those having problems after adding active and focus
give a class or id name to your button and add this to css
for example
//html code
<button id="aboutus">ABOUT US</button>
//css code
#aboutus{background-color: white;border:none;outline-style: none;}
Try this code:
<code>
<a href="#" class="button" > HOME </a>
<style type="text/css">
.button { background-color: #00CCFF; padding: 8px 16px; display: inline-block; text-decoration: none; color: #FFFFFF border-radius: 3px;}
.button:hover { background-color: #0066FF; }
</style>
</code>
Watch this (It will explain how to do it) - https://youtu.be/euti4HAJJfk
A simple as that :
link
Just add "class="btn btn-success" & role=button