I got some text after two contact icons. What I want is both the icon AND the text to be a link, so that when the icon OR the text is hovered they both light up.
At this point I am only able to achive this effect on the envelope example, but as you can tell the text conflicts with the icon itself.
.fa {
text-align: center;
vertical-align: middle;
text-decoration: none;
margin: 15px 3px;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 15px;
line-height: 30px !important;
}
.fa {
background: #F0F0F0;
color: #282828;
}
.fa:hover { color: #F0F0F0; }
.fa-envelope-o:hover,
.fa-phone:hover {
background: #282828;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
example#gmail.com
<br>
1234567
To achieve expected result , use below changes in HTML with CSS hover effect for both span and anchor element
.fa {
text-align: center;
vertical-align: middle;
text-decoration: none;
margin: 15px 3px;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 15px;
line-height: 30px !important;
}
.fa {
background: #F0F0F0;
color: #282828;
}
.fa:hover { color: #F0F0F0; }
.fa-envelope-o:hover,
.fa-phone:hover {
background: #282828;
color: white;
}
span:hover a{
background: #282828;
color: white;
}
span:hover{
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>example#gmail.com</span>
<br>
<span>1234567</span>
I came up with something...
.fa {
text-align: center;
vertical-align: middle;
text-decoration: none;
margin: 15px 3px;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 15px;
line-height: 30px !important;
}
span {
margin-left:15px;
}
.fa {
background: #F0F0F0;
color: #282828;
}
.fa:hover { color: #F0F0F0; }
.fa-envelope-o:hover,
.fa-phone:hover {
background: #282828;
color: white;
}
.fa-envelope-o::before {
content: "\f003";
margin-left: 7px;
}
.fa-phone::before {
content: "\f095";
margin-left: 8px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<span>example#gmail.com</span>
<br>
<span>1234567</span>
You could try making both the icon and the link <spans>, and give the link <span> a class (I've given it the classlink for the example):
<span class="fa fa-envelope-o"></span>
<span class="link">example#gmail.com</span>
And wrap them both in an <a> tag, also with a class, (I've used outer):
<a href="mailto:example#gmail.com" class="outer">
<span class="fa fa-envelope-o"></span>
<span class="link">example#gmail.com</span>
</a>
And apply the hover styles from that.
.outer { text-decoration: none; font-size: 15px; color: #282828; }
.outer:hover .link { color: #F0F0F0; }
.outer:hover .fa { background: #282828; color: white; }
This allows the rest of your CSS to be simplified to the following:
.fa {
text-align: center;
vertical-align: middle;
margin: 15px 3px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px !important;
background: #F0F0F0;
}
.outer {text-decoration: none; font-size: 15px; color: #282828;}
.outer:hover .link { color: #F0F0F0; }
.outer:hover .fa { background: #282828; color: white; }
.fa {
text-align: center;
vertical-align: middle;
margin: 15px 3px;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px !important;
background: #F0F0F0;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<a href="mailto:example#gmail.com" class="outer">
<span class="fa fa-envelope-o"></span>
<span class="link">example#gmail.com</span>
</a>
You could wrap them in 'span' tags. Also the 'fa fa-font' should start with 'i class'
<span class='mud'><i class="fa fa-phone"></i>1234567</span>
Then add to your CSS the following.
span.mud:hover {
background: #282828;
color: white;
}
Hope this helps you. Have a great day.
Try this
1234567
As seen above, you need to put the number within the 'a' tag.
Related
I have a css class assigned to a button like this:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button a:hover {
color: #f1f1f1;
background: #232856
}
The .button works perfectly, does everything I need it to do.
But the a and a:hover parts do nothing.
Any ideas?
You can get rid of the a: hover and instead just use the button: hover {
Here is the code:
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1
}
.button a {
color: #232856;
text-decoration: none
}
.button:hover {
color: #f1f1f1;
background: #232856
}
That should work. When you need something with a hover effect such as a button, you dont need to include the a:, just write button: hover
I think that you might forgot about class for button, if you want to do it general then use button in styles instead of .button.
Also you forgot about semicolon after text-decoration: none, so this lane and every css style below in same block scope is not applied.
.button {
margin: 4px;
padding: 4px;
width: 96%;
height: 48px;
max-width: 250px;
display: inline-block;
vertical-align: middle;
text-align: center;
cursor: pointer;
overflow: hidden;
white-space: normal;
color: #232856;
border: 1px solid #3d8b40;
border-radius: 8px;
background: #f1f1f1;
}
.button a {
color: #232856;
text-decoration: none;
}
.button a:hover {
color: #f1f1f1;
background: #232856;
}
<button class="button">
<a href="#">My a inside button<a>
</button>
Change to
.button:hover a{
// styling when on hover
}
I think I broke my BUTTON!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style>
.btn {
background-size: 10px 10px;
background: repeating-linear-gradient(45deg,#606dbc,#606dbc 10px,#465298 10px,#465298 20px);
height: 600%;
transform: rotate(-35deg);
transition: 0.3s;
}
.btn:hover {
color: gold;
}
</style>
</head>
<body>
<br><br>
<button class="btn btn-default btn-lg">Hover Over Me</button>
</body>
</html>
I need a red cross (font awesome icon) on the button.
The code I tried is at JSFiddle.
But I need:
UPDATE
I thought having a solution with a small code will help to execute on all codes related to it and therefore accepted Kiranvj's answer earlier.
But while changing codes as per Kiranvj's answer to the main code I couldn't achieve the expected results.
Full Code:
.button_cstm_quit {
background-color: red;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_quit:hover {
color: red;
font-weight: bold;
background: none;
border: 2px solid red;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_time {
background-color: #FF8C00;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_time:hover {
color: #FF8C00;
font-weight: bold;
background: none;
border: 2px solid #FF8C00;
}
#container_cstm {
width: 100%;
}
#left_cstm {
float: left;
width: 100px;
}
#right_cstm {
float: right;
width: 100px;
}
#center_cstm {
margin: 0 auto;
width: 100px;
}
#play_head {
display: flex;
/* establish flex container */
flex-direction: row;
/* default value; can be omitted */
flex-wrap: nowrap;
/* default value; can be omitted */
justify-content: space-between;
/* switched from default (flex-start, see below) */
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<body bgcolor="Aqua">
<div id="play_head">
<div>
<button class="button_cstm_quit"><i class="fas fa-sign-out-alt"></i></button>
</div>
<div>
<button class="button_cstm_ll" style='margin-right:45px'>50</button>
<button class="button_cstm_ll" style='margin-right:45px'>x2</button>
<button class="button_cstm_ll" style='margin-right:45px'><i class="fas fa-sync"></i></button>
</div>
<div>
<button class="button_cstm_time"><i class="fas fa-sync"></i></button>
</div>
</div>
</body>
I need that cross on all blue color buttons. (Sometimes all, sometimes 1 or 2. So div or i should be separate for each button)
Note: Placements of buttons can be anywhere, try to avoid left, right from the screen.
JSFiddle with different answers:
Kiranvj's answer (Recomended)
Anmol Sandal's answer (Option 2)
SWC's answer
Aryan Twanju's answer
A.Sakkeer's answer
.button_cstm_quit {
background-color: red;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_quit:hover {
color: red;
font-weight: bold;
background: none;
border: 2px solid red;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
position: relative;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_time {
background-color: #FF8C00;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_time:hover {
color: #FF8C00;
font-weight: bold;
background: none;
border: 2px solid #FF8C00;
}
#container_cstm {
width: 100%;
}
#left_cstm {
float: left;
width: 100px;
}
#right_cstm {
float: right;
width: 100px;
}
#center_cstm {
margin: 0 auto;
width: 100px;
}
#play_head {
display: flex;
/* establish flex container */
flex-direction: row;
/* default value; can be omitted */
flex-wrap: nowrap;
/* default value; can be omitted */
justify-content: space-between;
/* switched from default (flex-start, see below) */
}
.button_cstm_ll:before, .button_cstm_ll:after {
position:absolute;
content: '';
top: -5px;
bottom: -5px;
width: 5px;
background: #ff0000;
left: 0;
right: 0;
margin: 0 auto;
}
.button_cstm_ll:before {
transform: skew(30deg);
}
.button_cstm_ll:after {
transform: skew(-30deg);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" integrity="sha384-+d0P83n9kaQMCwj8F4RJB66tzIwOKmrdb46+porD/OvrJ+37WqIM7UoBtwHO6Nlg" crossorigin="anonymous">
<body bgcolor="Aqua">
<div id="play_head">
<div>
<button class="button_cstm_quit"><i class="fas fa-sign-out-alt"></i></button>
</div>
<div>
<button class="button_cstm_ll" style='margin-right:45px'>50</button>
<button class="button_cstm_ll" style='margin-right:45px'>x2</button>
<button class="button_cstm_ll" style='margin-right:45px'><i class="fas fa-sync"></i></button>
</div>
<div>
<button class="button_cstm_time"><i class="fas fa-sync"></i></button>
</div>
</div>
</body>
Try this
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
i#cmplt:before {
position: absolute;
font-size: 1.5em;
left: 10px;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<i id="cmplt" class="fas fa-times fa-3x" style="color: red;"><button class="button_cstm_ll" style='margin-right:45px'>50</button></i>
</body>
If you add the icon within the button and assign position: relative to the button and position: absolute to the icon then it should work. You can then position it with left, right and transform:
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
position: relative;
}
.button_cstm_ll i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-size: 2.5em;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<button class="button_cstm_ll" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>
You can use position: relative and position: absolute to get the desired result. Try this code.
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<button class="button_cstm_ll" style='margin-right:45px'><i id="cmplt" class="fas fa-times" style="color: red;"></i>50</button>
</body>
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
height: 100px;
width: 100px;
position: relative;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
.button_cstm_ll .fas {
position: absolute;
left: 0;
top: 0;
font-size: 150px;
line-height: 0.7;
}
.button_cstm_ll {
background-color: blue;
border: none;
color: white;
padding: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 35px;
margin: 4px 2px;
cursor: pointer;
border-radius: 50%;
}
.button_cstm_ll:hover {
color: blue;
font-weight: bold;
background: none;
border: 2px solid blue;
}
#cmplt:before {
position: absolute;
left: 14px;
top: 22px;
}
<body bgcolor="Aqua">
<link href="https://use.fontawesome.com/releases/v5.0.10/css/all.css" rel="stylesheet" />
<i id="cmplt" class="fas fa-times" style="color: red;font-size:70px;"><button class="button_cstm_ll" style='margin-right:45px'>50</button></i>
</body>
How can I center the FontAwesome icons inside the squares?
At this point all of the icons, except from facebook icon are beeing placed more or less to the right, especially the soundcloude icon.
I have been using the "w3schools - Social Media Buttons" example, it seems like this issue occure when the squares are scaled down.
.fa {
padding: 15px;
text-align: center;
vertical-align:middle;
text-decoration: none;
margin: 15px 3px;
border-radius: 50%;
width: 7.5px;
height: 7.5px;
font-size: 15px;
line-height: 7.5px !important;
}
.fa {
background: #F0F0F0;
color: #282828;
}
.fa-facebook:hover {
background: #3B5998;
color: white;
line-height: inherit;
}
.fa-youtube:hover {
background: #bb0000;
color: white;
line-height: inherit;
}
.fa-instagram:hover {
background: #125688;
color: white;
line-height: inherit;
}
.fa-soundcloud:hover {
background: #ff5500;
color: white;
line-height: inherit;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
Kill the unnecessary padding (which leaves no room for the icons) and let the width/height/line-height of the elements determine their layout.
Before:
padding: 15px;
width: 7.5px;
height: 7.5px;
line-height: 7.5px !important;
After:
width: 30px;
height: 30px;
line-height: 30px !important;
You can also remove some redundant styles from your :hover states.
Live example:
.fa {
text-align: center;
vertical-align: middle;
text-decoration: none;
margin: 15px 3px;
border-radius: 50%;
width: 30px;
height: 30px;
font-size: 15px;
line-height: 30px !important;
}
.fa {
background: #F0F0F0;
color: #282828;
}
.fa:hover {
color: #fff;
}
.fa-facebook:hover {
background: #3B5998;
}
.fa-youtube:hover {
background: #bb0000;
}
.fa-instagram:hover {
background: #125688;
}
.fa-soundcloud:hover {
background: #ff5500;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
Yes, you can centered the icons.
I have added my code snippet.
Suggesting, please do not write css for class fa the. please add new class for the same
.decoration-fa{
padding:15px;
text-align:center;
text-decoration: none;
border-radius: 50%;
background: #F0F0F0;
color: #282828;
width:18px;
height:18px;
}
.decoration-fa.fa-facebook:hover {
background: #3B5998;
color: white;
}
.decoration-fa.fa-youtube:hover {
background: #bb0000;
color: white;
}
.decoration-fa.fa-instagram:hover {
background: #125688;
color: white;
}
.fa-soundcloud:hover {
background: #ff5500;
color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
I'm building a website but for some reason my background-color is not working. Nothing happens, the background-color just stays white.
The code that is not working is below :
.sub-header {
background-color: black !important;
}
My complete code on jsfiddle: https://jsfiddle.net/j7mdqaop/ and the interesting lines are 158, 159, 160.
if i understand it correctly you are trying to do :
HTML
<header class="sub-header">
<div class="dropdown">
Chezzles
<i class="fa fa-bars fa-fw bars" style="font-size:24px"></i>
</div>
</header>
CSS
.sub-header {
background-color: black !important;
}
.sub-header .dropdown {
background-color: black !important;
width: 100%;
height: 25px;
padding: 5px;
}
.sub-header .dropdown * {
color: white;
}
.sub-header .dropdown i {
top: 15px;
}
.main-navbar-heading-2 {
top: 5px;
left: 5px;
text-decoration: none;
color: black;
font-family: Raleway;
font-size: 1.3em;
}
like this fiddle https://jsfiddle.net/Tanbi/j7mdqaop/4/
It's because all elements in your .sub-header are not in the flow (because of absolute position)
See this fiddle
.sub-header {
background-color: black !important;
display: block;
}
.main-navbar-heading-2 {
top: 5px;
left: 5px;
text-decoration: none;
color: black;
font-family: Raleway;
font-size: 1.3em;
}
Note : I add display: block; to make the background-color property occupy all the line instead of just the title "Chezzles" but you can keep inline if you wants.
I want to be able to have the text within the button change when the button is hovered over. The text only changes color when it is hovered over instead of the whole button. The button background should be #FFFFFF and the text color should be #3A75B0
HTML:
<div class="getStartedButton">
<a href ="/signup">
<button class="getStarted">
Get Started
</button>
</a>
</div>
CSS:
.getStarted {
display: table;
margin: 0 auto !important;
height: 170px;
width: 300px;
background: transparent;
text-decoration: none;
border-style: solid;
border-color: #FFFFFF;
font-family: Helvetica;
text-align: center;
color: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
font-size: 60px;
padding: 20px 10px 50px 10px;
margin-bottom: 50px;
}
.getStarted a {
text-decoration: none;
font-family: Helvetica;
text-align: center;
color: #FFFFFF;
font-size: 60px;
margin-bottom: 50px;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
.getStartedButton:hover {
color: #3A75B0;
background-color: #FFFFFF;
}
.getStartedButton {
width: 300px;
margin-left: auto;
margin-right: auto;
border-radius: 10px;
}
.getStartedButton a:hover {
color: #3A75B0;
}
.getStarted:hover {
color: #3A75B0;
}
.getStartedButton.getStarted:hover {
color: #3A75B0;
}
This is not possible in pure CSS. Try this JS approach:
function changeText(button){
button.innerHTML = "Text Changed!";
}
<div class="getStartedButton">
<a href ="/signup">
<button onmouseover="changeText(this)" class="getStarted">
Get Started
</button>
</a>
</div>
Hope that works for you!