I have the following HTML Code
<!DOCTYPE html>
<html>
<head>
<style>
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
</style>
<div class="tag12"><span> Click here for more information. </span></div>
</html>
I am looking to change the color when this is element is hovered, and go to an external site when it is clicked. For the hover, I have tried doing .tag12:hover{}, and .tag12 span:hover{} within the style brackets but neither of these have changed the color on hover.
just read more about CSS Selectors, so you can achieve your aim,
anyway here is a snippet to show up how to change element style in hover,
also read more about href attribute to learn how to create links
goodluck.
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
.tag12 span:hover {
color: lightgreen;
}
<div class="tag12"><span> Click here for more information. </span></div>
<!DOCTYPE html>
<html>
<head>
<style>
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
.tag12 a:hover{
color:red;
}
</style>
<div class="tag12"><span>Click here for more information.</span></div>
</html>
To remove the underline globally.
a:link{
text-decoration: none;
}
or for the class
.tag12 a:link{
text-decoration: none;
}
Change the whole element
.tag12 span:hover{
background-color:green;
}
You can check something like this
You can read more about available style options and the CSS selector on w3shool its a great source for beginners, Happy read :)
<!DOCTYPE html>
<html>
<head>
<style>
.tag12 span {
padding: 6px 10px;
background: #D0E8E4;
border-radius: 18px;
color: #000000;
font-family: Roboto;
font-size: 12px;
margin: 0 4px 8px 0;
font-weight: 500;
display: inline-block;
word-wrap: break-word;
white-space: normal;
}
/* Use somthing like this to change style of hover element itself*/
.tag12:hover{
background-color:blue;
}
/* Use somthing like this to change style of siblings on hover on parent*/
.tag12:hover a{
color:red;
}
</style>
<!-- to redirect user to another page on click you can use a tag insted of span and replace # in href with target url -->
<div class="tag12"> Click here for more information. </div>
</html>
Related
I created a button class named "primary". I noticed that it looks different on a button and on a tag, they have other sizes for example.
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
How can I make the class look the same on both?
JSFIDDLE
With HTML tags, browsers add their own default styles to the tags (yes, it could differ from browser to browser). In your case, there are 2 properties you need to add in the .primary class: 'display: inline-block and font` properties.
As per the JSFiddle you shared. Here is the updated code and screenshot of the both elements height after the primary class code is updated:
.primary{
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
/*font-size: 1.5rem;*/
vertical-align: middle;
border: none;
/* these 2 lines to be added */
display: inline-block;
font: 400 1.5rem Arial;
}
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-family: "Goudy Bookletter 1911", sans-serif;
font-size: 1.5rem;
vertical-align: middle;
border: none;
}
<button class="primary">This is a test</button>
<a class="primary">This is a test</a>
This is because a browser already gives HTML elements their own style. You will overwrite this style with your own CSS. But a button will have a different style than an a element by default.
For example the line-height and font-family may be different.
And in your case it seems that display: inline-block will do the trick.
This is because elements inherit default styles, if you want the anchor to look the same simply declare the font family and font-size in your class;
.primary {
border-radius: 0;
color: white;
background: #EC7404;
padding: 9px 29px;
font-size: 1.5rem;
vertical-align: middle;
border: none;
font-family: sans-serif;
font-size: 26px;
}
As I said, depending on what browser I'm using, the button varies for some reason.
Here's the code I'm using right now-
HTML-
<input type="button" id="submitButton" onclick="generateLink()" value="Go" />
CSS-
#submitButton {
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
cursor: pointer;
}
#submitButton:hover {
background-color: #6b5ebd;
}
#submitButton:active {
background-color: #554a97;
}
Whenever I look this up on the live server on my Windows PC (on both Firefox and Chrome), it looks the way I want it to. But when I deploy the test site on Firebase and check it out on my mobile phone (iPhone with Safari Browser), The text "Go" is gone and all I can see is a flat, text-less button.
I have also tried changing the <input> tag to a <button> tag, adding a display: block; and a bunch of other stuff but it doesnt seem to work.
Any idea why this could be happening?
Please and thanks.
Have you tried using anchor element ?
Go
a{
display: block;
color: white;
background-color: #8373e6;
font-size: 26px;
font-family: "Raleway", sans-serif;
font-weight: 400;
outline: none;
border: 3px solid #8373e6;
padding: 5px 15px;
margin: 20px;
border-radius: 30px;
box-shadow: 0 0 20px #9c9c9c67;
width: min-content;
text-decoration:none;
}
a:hover {
background-color: #6b5ebd;
cursor:pointer;
}
a:active {
background-color: #554a97;
}
When I am trying to add a border to a div element on my website, I am getting these weird borders.
This is the result I was looking for:
intended result
HTML
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
CSS
.outlined-button
{
border: 3px solid #fff;
border-radius: 10px;
box-sizing: border-box;
height: 48px;
width: 140px;
}
.outlined-button-text
{
color: #fff;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
}
The cause of the border is that a elements have inline flow while the enclosed p element has display block behaviour. Inline elements have no inherited width, this causes the border property to think that the element is 0 px wide, and places a border where it thinks the element is.
A fix for your solution is to use display: block for the link element(https://jsfiddle.net/qtdz296j/1/)
I also attached an alternative solution:
body {
background: #162CEA;
padding: 2rem 1rem;
}
.heading {
color: #FFF;
}
.button {
padding: .5rem 1rem;
border-radius: .5rem;
}
.filled-button {
background: #FFF;
}
.outline-button {
border: 3px solid #FFF;
color: #FFF;
}
<h1 class="heading">hey<h1>
<a class="button filled-button">sign up</a>
<a class="button outline-button">log in</a>
Can't tell anything without the rest of the css and html. Your post starts in the middle of a rule. I'd try playing with it and see what you can change. Make sure your css is affecting the elements you want it to be affecting.
Edit: Try changing your <p> tags inside the buttons to <span>. Or better yet, don't enclose them in anything, and just style the button text directly. I also highly suggest looking into the correct use of <button> vs. <a>. It's a lot easier to make buttons work when they're actually buttons. But changing the <p>s to an inline element like <span> will fix your immediate problem.
this works if you just need a border around that div. cleaned it up a little and added a missing ;. it there are a lot of nested classes and you just need to target the right one. there are only 2 divs in this, so if you are talking about the outer/parent div, just give that an id and target it. Enjoy!
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
</body>
<style>
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.filled-button-text {
display: table-cell;
vertical-align: middle;
}
.filled-button {
float: left;
width: 140px;
height: 48px;
margin-left: 15%;
background: #FFFFFF;
border-radius: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #000000;
display: table;
text-align: center;
}
.outlined-button {
width: 140px;
height: 48px;
box-sizing: border-box;
}
.outlined-button-text {
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 24px;
line-height: 28px;
color: #FFFFFF;
}
.buttons {
border: 2px solid black;
}
</style>
</html>
You can use this code
body {
margin: 0;
padding: 0;
font-family: Roboto;
background-color: #162cea;
}
.headline {
text-align: center;
color: #ffffff;
}
.buttons {
padding: 30px;
margin: 0 auto;
text-align: center;
}
.filled-button {
border-radius: 10px;
color: #000000;
font-weight: bold;
font-size: 30px;
height: 55px;
width: 140px;
background-color: #ffffff;
display: inline-block;
cursor: pointer;
margin: 0 10px 0 0;
padding: 0;
}
.filled-button .filled-button-text {
margin: 0;
padding: 9px;
}
.outlined-button {
border-radius: 10px;
color: #ffffff;
font-weight: bold;
font-size: 30px;
height: 52px;
width: 140px;
background-color: #162cea;
display: inline-block;
border: 3px solid #ffffff;
cursor: pointer;
margin: 0 0 0 10px;
padding: 0;
}
.outlined-button .outlined-button-text {
margin: 0;
padding: 9px;
}
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button"><p class="filled-button-text">sign up</p></a>
<a class="outlined-button"><p class="outlined-button-text">log in</p></a>
</div>
</div>
Hello I hope this will help. and a small advice, as you might already know it. do not use a block level element inside a inline element even though you are changing the display property its safer that way.
body {
background: #162CEA;
}
.headline {
width: 34%;
margin-top: 15%;
margin-left: 15%;
margin-bottom: 10px;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 64px;
line-height: 75px;
color: #FFFFFF;
}
.button {
width: 100%;
text-align: center;
}
.filled-button-text,
.outlined-button-text {
display: block;
font-family: Roboto;
font-style: normal;
font-weight: bold;
font-size: 1.75em;
line-height: 2.25em;
width: 100%;
text-align: center;
}
.outlined-button-text {
color: #FFFFFF;
}
.filled-button {
background: #FFFFFF;
}
.filled-button,
.outlined-button {
width: 49%;
display: inline-block;
border: 3px solid #FFFFFF;
box-sizing: border-box;
display: inline-block;
border-radius: 0.5em;
}
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' type='text/css' media='screen' href='styles.css'>
<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.0.0/firebase-auth.js"></script>
<script>
// Your web app's Firebase configuration
var firebaseConfig = {};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
</script>
</head>
<body>
<div>
<h1 class="headline">hey</h1>
<div class="buttons">
<a class="filled-button">
<span class="filled-button-text">sign up</span>
</a>
<a class="outlined-button">
<span class="outlined-button-text">log in</span>
</a>
</div>
</div>
</body>
</html>
My CSS stylesheet loads almost all the contents but it is not loading my CSS for button. It's strange because all other things are working fine. I use opera. I have posted the CSS below which is not loading, also how I load the CSS.
<link rel="stylesheet" type="text/css" href="/style.css">
.button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
JS fiddle https://jsfiddle.net/hpsj2e0L/
It works fine in the fiddle but not in my site.
The problem with your code is that you are writing CSS inside your HTML file without wrapping it into a <style> tag. Like this:
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also, you don't need both selectors if you are applying the style to a <button> you can just use button.
.button is only necessary if you are going to apply it as a class like in <div class="button"></div>
Check other style files to button class. Try give the different class name or load your style file later than others.
make sure you put your css in style tag or in css file
<style>
.button, button {
background-color: #22a4a3b5;
border: none;
color: white;
padding: 4px 14px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 17px;
margin: 0px 2px;
cursor: pointer;
}
</style>
also check if you have .button class in your html or maybe its button tag
I am trying to get a link to be half one color and half another color, then switch upon hover. So: (white)Hello (Blue)Everyone! -> (Blue)Hello (White)Everyone!
I think I may have dumbed down the code too much... this is a better example.
How do I get it to where "EVERYONE!" does not have a box around it?
HTML:
<div class="home-logo-text">
<a href="#">
HELLO
<span class="home-logo-text-roads">
EVERYONE!
</span>
</a>
</div>
CSS:
.home-logo-text a {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #808080;
}
.home-logo-text-roads {
font-family: 'Oswald', sans-serif;
font-size: 60px;
font-weight: 700;
text-transform: uppercase;
position: relative;
margin-bottom: 0px;
text-align: center;
line-height: 1;
padding: 5px 25px 0;
border: 5px solid;
color: #6698cb;
}
.home-logo-text.light a {
color: rgba(255,255,255,0.9);
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #808080;
}
a:hover .home-logo-text-roads {
color: #ffffff;
}
Your last CSS rule doesn't look right:
.home-logo-text-roads a:hover {
color: #ffffff;
}
This CSS says "for an <a> element sitting inside a .home-logo-text-roads element, when it gets hover change its text color to #ffffff. Which is clearly not what you wanted, since you have no <a> element inside your span. If you want to change the span's color on hover event of the <a> which is its parent, switch the selectors around:
a:hover .home-logo-text-roads {
color: #ffffff;
}
Remember when there's a space between selectors it indicates a fuzzy hierarchy and the rules are applied to the element to the far right.
You need this. Use whatever color you want.
.home-logo-text a:hover .home-logo-text-roads {
color: #707070;
}
Check DEMO here.
Put the correct order of the HTML elements so CSS styles will be applied:
.home-logo-text a {
color: #707070;
}
.home-logo-text-roads {
color: #6698cb;
}
.home-logo-text a:hover {
color: #6698cb;
}
.home-logo-text a:hover .home-logo-text-roads {
color: #ffffff;
}