I have a button class working like this :
<p class="button">Rejoindre</p>
The CSS is :
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
}
.button a:hover
{
text-decoration: none;
}
How can I make the entire button (represented by the paragraph tag) a link instead of just the text ?
You can put the link tag on the outside to make anything inside it be contained in the link:
<p class="button">Rejoindre</p>
However, you probably want to use something other than a p tag for your button, maybe a button element instead?
More info on HTML buttons.
Add display: block to the .button a ruleset.
http://jsfiddle.net/ExplosionPIlls/UvrKx/
You can add display:block; to you anchor tag.
display: block means that the element is displayed as a block, as
paragraphs and headers have always been. A block has some whitespace
above and below it and tolerates no HTML elements next to it, except
when ordered otherwise (by adding a float declaration to another
element, for instance).
Fiddle: http://jsfiddle.net/akx3p/
CSS:
p.button
{
background-color: #e74c3c;
line-height: 30px;
width: 200px;
text-align: center;
}
.button a
{
font-family: Montserrat, sans-serif;
color: white;
font-size: 0.9em;
text-transform: uppercase;
display: block;
}
.button a:hover
{
text-decoration: none;}
<p> are block elements, meaning that they naturally are at 100% width. If you just added display: block; to the anchor tag, you can make it behave the same way. Here's a fiddle
. That way allows you to get rid of the p tag all together.
Related
I am trying to create a button that has an icon, but when I add the icon the text isnt centered vertically. How can I fix this?
This is the code in HTML & CSS:
<a href="#">
<button class=" account signUp"><span class="icon-profile</span>button</button>
</a>
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
but when I add the icon the text isnt centered vertically
Put the following two properties on its parent
.parent-of-icon-and-text {
display: grid;
place-content: center;
}
Please don't use a button and a link, choose one that best fits your scenario.
To use a button as a link, you can put it in a form.
.signUp {
background-image: var(--orange-background);
border-image: var(--orange-background);
font-family: poppins;
font-weight: 600;
color: white;
}
<form onsubmit="#">
<button type="submit" class="account signUp"><span class="icon-profile"></span>button</button>
</form>
Corrections
It is invalid HTML to place a <button> inside an <a>nchor. They are both interactive content and should never have inertactive content as a descendant node. <a>nchor has been removed. For more details refer to Can I nest a <button> element inside an <a> using HTML5?.
Typo in HTML, "> missing:
<span class="icon-profile"></span>
In CSS the font-family value of Poppins was misspelt as poppins (font-family values are case-sensitive).
Solution
The OP was incomplete so what is suggested in the example is as generic as possible. In the OP, span.icon-profile needs these two styles:
display: inline-block;
vertical-align: middle
vertical-align will set the tag's contents to a vertical position by either a pre-set value or a legnth value.
display: inline-block or table-cell is required by vertical-align
Further details are commented in the example below
/*
The actual CSS to resolve alignment issues explianed by OP is marked with a ✼ which are `display: inline-block` and `vertical-align: middle`
*/
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
/*
Global default for font
*/
:root {
font: 2ch/1 Poppins;
}
/*
Any rem unit measurements will reference 1rem to 2ch
*/
body {
font-size: 2ch;
}
button,
b {
display: inline-block; /*✼*/
font-weight: 300;
}
.sign-up {
font: inherit;
border-radius: 4px;
color: white;
background: #333;
}
.btn-link:hover {
outline: 1px solid cyan;
color: cyan;
cursor: pointer;
}
.btn-link:active {
outline: 2px solid cyan;
color: black;
background: white;
}
.icon-profile {
font-size: 1rem;
vertical-align: middle; /*✼*/
}
/*
content: '⚙️'
in HTML it's ⚙️
*/
.icon-profile::before {
content: '\002699\00fe0f';
}
<button class="account sign-up btn-link"><b class="icon-profile"></b> Profile</button>
I can't move the text decoration from the "download text".
Incidentally - I'd also like to be able to center it against the image but can't work out how to do that either... Code below :)
img {
vertical-align: text-middle;
float: left;
}
p {
font-size: 220%;
font-family: Arial, Verdana, sans-serif;
text-decoration: none;
}
<a download="GLV-11.pdf" href="https://drive.google.com/uc?
export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
<p class="brochure"> Brochure Download <img src="https://drive.google.com/uc?
export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"> </p>
</a>
You need to target the a element itself:
a {
text-decoration: none;
}
Declare the text-decoration property on the containing a (anchor) tag, e.g:
a {
text-decoration: none;
}
Code Snippet Demonstration:
img {
vertical-align: text-middle;
float: left;
}
p {
font-size: 220%;
font-family: Arial, Verdana, sans-serif;
line-height: 73px; /* equal to height of img element */
}
a {
text-decoration: none;
}
<a download="GLV-11.pdf" href="https://drive.google.com/uc?
export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
<p class="brochure"> Brochure Download <img src="https://drive.google.com/uc?
export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"> </p>
</a>
The text-decoration needs to be defined for the a tag itself. It's also common to apply different settings to the different states (link/hover etc.) as shown below.
Concerning the vertically centered alignment, you can use display: inline-block and vertical-align: middle as shown below. (Note: I moved the text to be after the image in the code)
img {
display: inline-block;
vertical-align: middle;
}
p {
display: inline-block;
vertical-align: middle;
font-size: 220%;
font-family: Arial, Verdana, sans-serif;
}
a:link, a:visited {
text-decoration: none;
}
a:hover, a:active, a:focus {
text-decoration: underline;
}
<a download="GLV-11.pdf" href="https://drive.google.com/uc?
export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm">
<p class="brochure"><img src="https://drive.google.com/uc?
export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download"> Brochure Download </p>
</a>
For anchor tags, we remove the text-decoration css property.
learn more about this property here
Also to center ,a tag with image, you can assign 'a' tag with a classname, say 'brochure-download--container'
You can modify your html like this:
<a class="brochure-download--container" download="GLV-11.pdf" href="https://drive.google.com/uc?export=download&id=1IzZeCDoRRMRudo3egijFimr6eJaHgMAm"><p class="brochure"><img src="https://drive.google.com/uc?export=download&id=1Rh5twX_t1vEQf198L4le5qCzg8KGxfbc" alt="Brochure Download" align="center"><span>Brochure Download</span></p>
</a>
You can then add this CSS for aligning to center and remove text-decoration from anchor tag.
a.brochure-download--container p{
display:flex;
align-items:center;/*bring content to center*/
}
Btw, flex property still is not supported in all browsers and might require vendor prefixes..you can check it here
I will leave you with discovering vendor prefixes(google is really helpful when one starts learning new stuff)
I have the following CSS and HTML: http://jsfiddle.net/47w0h73r/6/
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
As you will notice, the button doesn't appear as inline. Why is this? How can I make this button inline, just like its sibling a?
Issue
By changing the button to an a you will notice that the display: inline makes the padding of the parent element to ignore the padding of both child elements, making them really display inline. The problem, is that the button tag doesn't really appear inline, which makes the parent element's padding push both elements down. How can I fix this?
Trying to set a button to display:inline seems to cause some confusion. The inability to get display:inline behaviour is often attributed to it being a replaced element, but that is incorrect. <button> is not a replaced element.
In fact, the HTML5 specification, Section 10.5.2 The button element makes this requirement:
When the button binding applies to a button element, the element is
expected to render as an 'inline-block' box rendered as a button whose
contents are the contents of the element.
The language is a little unusual, but the button binding does apply, and the effect is that the binding takes precedence over the specified value of the display property. The effect is that the button is always rendered as display:inline-block, no matter what its specified value is. There is nothing you can do about it.
Add line-height:17px; to a, button and that should make them the same:
.one {
padding: 20px;
background: #f00;
}
.two {
padding: 20px;
background: #00f;
}
a,
button {
font-family: Arial, Helvetica;
font-size: 16px;
padding: 10px;
background: #fff;
color: #000;
display: inline;
border: 0;
text-decoration: none;
line-height: 17px;
}
<div class="one"></div>
<div class="two">
Link
<button>Button</button>
</div>
I've searched but couldn't find anything relating to this problem I'm having.
I have been trying to work this out for ages now but can't seem to do it. I have a div which has text and an image in it. I want all text and background within the div to change color when I hover anywhere within the div. I have made it so that the text at the bottom changes, along with the background color, but can't seem to get the top text (h4) to change color.
It changes color when I hover directly over the h4 element but not when I hover anywhere within the div.
The link below is a rough example of what I want to achieve. There is seperate styling on the CSS of the h4 tag so can't make it a p like the rest. That would be the easiest way to do this but unfortunately they must stay different.
This is my CSS style
.container {
text-align: center;
}
.container h4 {
text-align: center;
color: black;
}
#project1 {
text-align: center;
color: white;
background-color: white;
background-color: rgba(255,255,255,0.9);
color: black;
}
#project1:hover {
background-color: blue;
color: white;
}
#project1 h4:hover {
color: white;
}
#project1 h4 {
text-transform: uppercase;
}
a {
text-decoration: none;
}
Is there any way to do this using CSS and not jquery/javascript? I'm new to Web Development so only know some HTML/CSS at present.
Thanks.
Tom
JSFIDDLE LINK
Change your CSS style from
#project1 h4:hover {
color: white;
}
To
#project1:hover h4 {
color: white;
}
JSFIDDLE DEMO
You can use
#project1 h4 {
color: inherit;
}
to make it inherit #project1's color.
Demo
You can nest h4 tag in p tag.
no need for #project1 h4:hover in CSS.
Demo Fiddle
im trying to change the colour of #commentslink to white. All my other font styling (font- family, size) is working, just the colour won't change
My HTML is this;
<div id="commentslink">
<div class="circle">
<p>10</p>
</div>
</div>
and my CSS is this
a:link, a:visited {
color: #0eb0d3;
text-decoration: none;
}
a:hover {
color: #0eb0d3;
opacity: 0.4;
text-decoration: none;
}
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
.circle {
float: right;
background-color: #f89b2d;
width: 32px;
height: 32px;
border-radius: 16px;
position: relative;
margin-top: -10px;
margin-right: 20px;
}
First of all its only color and not font-color: #ffffff; and secondly you should use
#commentslink a { /* Specific selector */
color: #fff;
}
Demo
Let me tell you, the above selector will select all a tags inside the element having #commentslink as an id so if you want to target a nested inside p you can use a more specific selector like
#commentslink .circle p a {
/* Selects all a element nested inside p tag further nested inside an element
having class .circle which is further nested inside an element having
#commentslink as an id
*/
color: #fff;
}
Just don't make your selectors overspecific if you don't really require, else you will end up making more and more nested rules thus bloating your CSS, so go as much basic as you can.
Last but not the least, this has nothing to do with CSS3
Just a good read here.. related to this answer...
Try this with !important
#commentslink {
float: right;
color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
and use color: rather than font-color
Elaborating on Mr. Alien's answer, it's best to use the selector #commentslink a. CSS rules are applied in order of specificity, and the style for the a element is more specific than the styling for its parent element (#commentslink). The selector #commentslink a is more specific than either of the others, and will therefore take precedence.
Here's a good article on specificity.
And as others have stated, the property is color not font-color.
#Sobin, !important should be used sparingly, as it will clobber other rules applied to elements within the #comments div. Better to take advantage of specificity.
The "10" is going to be #0eb0d3 because of the CSS styling applied to a tags.
Change
#commentslink {
float: right;
font-color: #ffffff;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
To
#commentslink {
float: right;
font-color: #ffffff !important;
font-size: 19px;
font-family: 'Montserrat', sans-serif;
And it will override the other styling
Replace font-color with color.
#commentslink {
float: right;
color: #ffffff; // this is enough not font-color
font-size: 19px;
font-family: 'Montserrat', sans-serif;
}
Also
a:link, a:visited {
color: #0eb0d3; // Also this a css override
text-decoration: none;
}
Update: I just realized that above won't work. I thought parent's css will override the child. But this is wrong here, since a tags have default color rendered by browsers.
#commentslink a {
color: #ffffff;
}
Thanks #Mr. Alien for his fiddle and the SO link.