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>
Related
Currently studying a little bit of simple coding for school. I tried copying the Twitter UI but how do I remove the border on the input element while typing?
Here's what it's look like
And here's what it's look like while typing in it
Here is my code
<!DOCTYPE html>
<html>
<head>
<style>
.twitter-dp {
width: 50px;
height: 50px;
object-fit: cover;
border-radius: 25px;
vertical-align: middle;
margin-right: 5px;
}
.text {
font-size: 17px;
border: none;
width: 300px;
vertical-align: middle;
}
.tweet {
vertical-align: middle;
background-color: rgb(74, 171, 240);
border-style: none;
font-style: arial;
font-size: 17px;
color: white;
padding-top: 5px;
padding-bottom: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 25px;
cursor: pointer;
}
.tweet:hover {
opacity: 0.8;
}
input {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
</style>
</head>
<body>
<img class="twitter-dp" src="practiceimage.jpg" />
<input class="text" type="text" placeholder="What's happening?" />
<button class="tweet">Tweet</button>
</body>
</html>
It's hard to say for sure without seeing the html codes, but you can try to add these codes between style tags.
input {
border: none;
background-color: transparent;
resize: none;
outline: none;
}
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>
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.
I've got a layout bug with the snippet below in IE11, Chrome, Firefox - the second button is not correctly inline with the first button.
The problem goes away as soon as I add any non-whitespace content to the inner span on the second button.
Is there a CSS fix that will bring the buttons inline without requiring actual content, ideally without changing the rest of the CSS?
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder { padding: 20px; background-color: #254669 }
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
Just add vertical-align:middle to button clas like this: Demo
button {
font-family: Verdana;
font-size: 13px;
color: white;
position: relative;
padding: 0 8px 1px 8px;
height: 24px;
background-color: #254669;
border: 1px solid #53779D;
transition: all 150ms ease-out;
outline: none;
vertical-align:middle; /* added this */
}
You need to add
display: table-row;
vertical-align: middle;
in your button and
box-sizing: border-box;
display: table;
in .mainBorder class
<!DOCTYPE html>
<html>
<head>
<title>CSS Problem</title>
<meta charset="utf-8"/>
<style>
.mainBorder {
background-color: #254669;
box-sizing: border-box;
display: table;
padding: 20px;
width: 100%;
}
button {
background-color: #254669;
border: 1px solid #53779d;
color: white;
display: table-row;
font-family: Verdana;
font-size: 13px;
height: 24px;
outline: medium none;
padding: 0 8px 1px;
position: relative;
transition: all 150ms ease-out 0s;
vertical-align: middle;
}
button:disabled {
opacity: 0.65;
}
button:enabled {
cursor: pointer;
}
button:hover:enabled {
background-color: #53779D;
}
button:active:enabled > span.content {
display: inline-block;
transform: translateY(-1px);
}
button:focus {
border-color: white;
}
button.iconButton {
width: 24px;
padding: 0;
}
span.icon {
display: block;
height: 16px;
}
</style>
</head>
<body>
<h1>Button</h1>
<div class="mainBorder">
<button><span class="content">Default</span></button>
<button class="iconButton"><span class="icon"></span></button>
</div>
</body>
</html>
I would suggest to not have all the spaces if you intend to have space between elements because that is hard to manage at times but if you want to keep it the same markup this css for the .iconButton:
button.iconButton{
width: 24px;
top: 7px;
padding: 0;
}
but if you want to rid yourself of the spaces then you can, optionally, the spaces would definitely affect the layout
button.iconButton{
width: 24px;
top: 3px;
padding: 0;
margin: 0 15px;
}
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!