Below is my problem, these are the same link and the orange background is a hover effect set in css. As you can see when the window is compressed the text of the link moves onto the next lines to fit the screen. But the background effect of each line obscures the second. I can set the display to be block, but that would stretch the background to 100% of the window, which isn't what I want when the page is not narrow.
Thanks in advance
EDIT: CODE
<div class="PageSection">
<a class="LinkButton" href="">This Is My Link, There Are Many Like It But This One Is Mine</a>
</div>
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
padding: 5px 10px 5px 10px;
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
}
EDIT:
I know I could set the line-height css property, but that gives the link ugly spacing, and I am also aiming for a square block of background colour, just not to the full width of the page.
assuming your padding is for creating that extra block effect.
try
.PageSection {
width: 100%;
margin: 50px 0px 50px 0px;
text-align: center;
font-size: 30px;
}
input[type="button"],
input[type="submit"],
.LinkButton {
/*padding: 5px 0 5px 0;*/
cursor: pointer;
color: inherit;
font-size: inherit;
text-decoration: none;
line-height: 100%;
border: none;
background-color: transparent;
background-clip: padding-box;
}
input[type="button"]:hover,
input[type="submit"]:hover,
.LinkButton:hover {
background-color: #FF5A19;
box-shadow: 10px 0 0 0px #FF5A19,-10px 0 0 0px #FF5A19;
}
all you need on the link is background-clip: padding-box; on the link and some box-shadow to cover the extra bit where padding can't reach due to inline element behaviour.
Edit: JSFiddle
I think i have managed to do what you wanted, do you want it multi-lined even on full width or when page width is smaller
I have used multiple spans tags to controls the lines
<div class="PageSection">
<a class="LinkButton" href=""><span>This Is My Link, </span> <span> There Are Many Like </span> <span> It But This One Is Mine </span></a>
</div>
here is the fiddle on what i have achieved
I HAVE UPDATED THE FIDDLE to your desired outcome
See the FIDDLE here
Related
I have a .button class which on the active state adds an inset box shadow and increases the line-height by 2 to give a button press effect. But the button adjacent to it and the text below it also move down which I do not want. Could you please tell me how can I achieve this effect without the anything else moving?
Note: I only want the text inside the button to move down by 2px on button press and hence I chose using the line-height.
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
Just add vertical-align: top; to your .button styles.
Default value of vertical-align property is base-line. When one button is focused, because of change in its line-height, alignment of .button elements gets disturbed and as a result it push down the below content.
.button{
display: inline-block;
vertical-align: top;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
line-height: 38px;
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
I would suggest making the line height 38px and adding transparent box shadow (of the same height) when button is not active. This way in active state nothing will be moved.
You can try this with a transformation:
.button{
display: inline-block;
height: 36px;
padding: 0 18px;
background: cyan;
color: black;
border: none;
line-height: 36px;
margin: 6px;
}
.button:active, .button:focus{
outline: none;
}
.button:active{
box-shadow: 0 2px 0 0 blue inset;
transform:translateY(2px);
}
<button class="button">Hello!</button>
<button class="button">Bye!</button>
<div>Hello!</div>
I have a list of CSS to format my link button but it appears only working in Chrome but not IE, any ideas, the hover and everything works just not the link itself
thanks in advance
CSS
.button {
background-color: #4CAF50;
border-radius: 50%;
width: 170px;
height: 170px;
color: white;
padding: 4px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
position: absolute;
margin-top: 0px;
margin-left: 400px;
background-color: white;
color: white;
border: 4px solid #83b739;
}
.button1:hover {
background-color: #83b739;
color: white;
}
HTML
<button class="button button1">link</button>
It's probably not even a CSS issue, but rather an issue with nesting interactive elements like that.
Don't put a link inside a button. That's just bizarre. Use just the <a> element and style that.
I'm not exactly sure what would have caused your problem, however is is most likely due to a css/html nesting problem, where multiple css styles interact with the nested elements differently on different browsers? It is better to simply remove the button element in the html and just style the <a> tag to look like a button. By doing this the code is less complicated, you should have fewer problems with styles and nested elements, and this is how most make link buttons anyway. Here is an example of how I made a link button in a recent project, some of the stylings are missing (custom fonts, etc) but it shows that you don't need the button tag, it works better without it, and how to make a button with just the <a> tag.
.btn:link,
.btn:visited {
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
color: white;
border-radius: 200px;
border: 3px solid #1A75BB;
margin: 20px 20px 0px 0px;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover,
.btn:active {
background-color: #14598e;
border-color: #14598e;
}
.btn-full:link,
.btn-full:visited {
background-color: #1A75BB;
margin-right: 20px;
}
.btn-full:hover,
.btn-full:active {
background-color: #14598e;
}
.btn-ghost:link,
.btn-ghost:visited {
color: black;
border-color: #14598e;
}
.btn-ghost:hover,
.btn-ghost:active {
color:white;
}
Why use AnyMath?
What problems can AnyMath solve?
It’s not just about IE. Such link-inside-button does not work in Firefox too.
If you really (think twice) need this to be a button instead of just a link, remove the explicit link from your button and wrap the button in a simple form:
<form action="http://example.com/">
<button class="button button1" type="submit">link</button>
</form>
But based on your code, button element is unneeded, and you should just use a link instead:
<a href="http://example.com/" class="button button1">link</button>
Here is how it looks from my source files
And here is how it looks from where it is hosted
Obviously alot wrong with it but the one thing I'm most worried about is that border around the blue button.
Here's the HTML code for each button.
Blue Button
View The Line Up</button>
Grey Button
View The Line Up!</button>
and the CSS.
Blue Button
.btn {
-webkit-border-radius: 28;
-moz-border-radius: 28;
border-radius: 28px;
font-family: Arial;
color: #ffffff;
font-size: 14px;
background: #358cb1;
padding: 10px 30px 10px 30px;
text-decoration: none;
float: left;
margin-top: 20px;
}
.btn:hover {
background: #3cb0fd;
text-decoration: none;
}
Grey Button
.btn2 {
-webkit-border-radius: 31;
-moz-border-radius: 31;
border-radius: 31px;
font-family: Arial;
color: #000000;
font-size: 14px;
padding: 10px 30px 10px 30px;
border: solid #000000 1px;
text-decoration: none;
float: left;
margin-top: 20px;
margin-left: 20px;
}
.btn2:hover {
background: #acb0b3;
text-decoration: none;
}
If you want a solid, single-colour border, then:
border-style: solid;
It looks like it's set to something like inset or outset which are meant to create a quasi-3D effect, Windows 98-style.
If you don't want any border at all, then:
border: 0;
I'm not sure what do you want exactly but why are you wrapping an <a> tag around a <button> ? try this as in this JS Fiddle
View The Line Up
View The Line Up!
border:none; will get rid of the border.
As an aside, having a button inside of a link sounds redundant. Why not style the link instead (and apply display:inline-block;)?
My button text
I'm making a website and want to have a link inside a div that changes colour when hovered over, however I've come across a problem. Pre hover, I want a border around the div the same colour as the text in the link inside. The background colour should be white. Then, upon hover, I want the background colour to change to the colour of the text and border, and the text to become white. Because I have padding inbetween the link and div border, it doesn't quite work as intended. Here is the source html/css:
HTML:
<div id="home">
HOME
</div>
CSS:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home a:hover {
background: #00a651;
color: #ffffff;
}
When anywhere within the div is hovered over other than the link, nothing happens, and when you hover over the link the padding remains white. What do I need to do to make it so the colour change happens when anywhere on the div is hovered over, and the whole divs colour changes? Thanks, Brandon :)
#home {
font-size: 30px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
border: 4px solid #00a651;
padding: 10px 20px 10px 20px;
color: #00a651;
text-align: center;
}
#home a:hover {background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>
You need to add the hover event to the div and the anchor:
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {
background: #ffffff;
color: #00a651;
text-align: center;
}
#home:hover {
background: #00a651;
color: #ffffff;
}
#home:hover a {
background: #00a651;
color: #ffffff;
}
<div id="home">
HOME
</div>
I recommend using the jQuery library, if you know how to use it:
Link your jQuery download to your main html file or use a CDN.
In your JavaScript file add a hover event on your link and use the css effect to to change the color of the div once you hover over the link. Then add another css effect so the link changes color as the div does. Like this:
$(document).ready(function(){
$('a').hover(function(){
$('#home').css("background-color","#00a651");
$('a').css("color", "chooseacolor");
});
});
I am not entirely sure what you are asking of, so this is the best answer I can give!
I don't think using :hover on DIV elements is a good idea. As I know, this practice is not fully supported on all browsers of all versions. Why not use some JS?
But, anyway, if you need all area (including padding) in the DIV become clickable - you should rather make it "display:block" in CSS.
$(document).ready(function() {
$('#home').hover(function() {
$(this).css('background-color', '#00a651').find('a').css({
backgroundColor: '#00a651',
color: '#FFFFFF'});
}, function() {
$(this).css('background-color', '#FFFFFF').find('a').css({
backgroundColor: '#ffffff',
color: '#00a651'});
});
});
#home {
border: 4px solid #00a651;
font-size: 30px;
padding: 10px 20px 10px 20px;
margin: 20px 100px 20px 100px;
display: inline-block;
}
#home a {background: #ffffff;
color: #00a651;
text-align: center;
}
/* There is no need to use :hover anymore if using a script */
<!-- this goes to the HEAD section if not arleady there -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div id="home">
HOME
</div>
I´m trying to do some buttons with image and text, and I already did this work.
But now I´m studying a diferente hypothesis, If I have a text bigger I´m trying to center the text in the button but I´m not having sucess put this right. I´m not having succeess putting my very big is not good align-center just below the 1st text.
Have you ever had a case like this? How we can solve this?
I have this Html for two buttons:
<button class='btn'>
<img class="big_btn" src="icon1.png" width="40" height="40"/>
Big button so big <span> very big is not good</span>
</button>
<button class='btn'>
<img src="icon1.png" width="40" height="40">
2button big
</button>
And I have this css file:
.btn {
position: relative;
width: 180px;
height: 60px;
margin-top:7%;
padding: 0 10px 0 10px;
line-height: 37px;
text-align: left;
text-indent: 10px;
font-family: 'bariol_regularregular';
font-size: 15px;
color: #333;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
background: #f1f1f1; /* button background */
border: 0;
border-bottom: 2px solid #999; /* newsletter button shadow */
border-radius: 14px;
cursor: pointer;
-webkit-box-shadow: inset 0 -2px #999;
box-shadow: inset 0 -2px #999;
}
.btn:active {
top: 1px;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.btn img { float: left;}
.btn .big { margin-top:10px;}
.btn:hover { background-color: #f7f7f7;}
Here's the Fiddle: http://jsfiddle.net/3F9pu/
My image updated:
Your problem is your line-height attribute. If you set that to be 37px, each new line of text will be separated by 37px. Remove `line-height:37px and the text will wrap around the image.
line-height: 37px
I also removed your text-indent and replaced it with a margin on your floated image to make the text all align properly.
.btn img{
float:left;
margin-right: 10px;
}
text-indent: 10px
JSFiddle
Use a CSS background image.
Have a fiddle - Fiddle Link!
HTML
<button class='btn'>Big button so big very big is not good</button>
<button class='btn'>2button big</button>
CSS
.btn {
background: url("http://lorempixel.com/output/cats-q-c-40-40-3.jpg") #CCC 10px no-repeat;
border: none;
padding: 10px 10px 10px 60px;
width: 200px;
text-align: left;
vertical-align: top;
min-height: 60px;
cursor: pointer;
}
.btn:hover {
background-color: #F00;
}