I am working with this css file and I can;t figure out what is the full class name of the button with noHover variant. I need it to be used in a different stylesheet. I cannot look it up in console as the classes are generated dynamically there. if it helps, the stylesheet name is: Button.module.scss. Any hints appreciated.`
.main {
background-color: #2a2a2a;
color: #ffffff;
font-size: 16px;
line-height: 24px;
font-weight: 600;
padding: 10px 30px;
&:not(.noHover):hover {
color: #ffffff !important;
background-color: $primary;
text-decoration: none;
}
}
.small {
#extend .main;
font-size: 13px;
line-height: 24px;
padding: 5px 10px;
font-weight: 400;
}
.outline {
display: inline-block;
padding: 5px 10px;
border: 1px solid #2a2a2a;
color: #2a2a2a;
font-size: 13px;
line-height: 22px;
&:not(.noHover):hover {
background-color: #2a2a2a;
color: #ffffff;
}
}
`
Related
How to change "Contacte-nos" text color on :hover?
.popmake-contacte-nos {
background-color: #fffff7;
/* Green */
border: none;
color: black;
font-weight: bold;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.popmake-contacte-nos:hover {
background-color: #3c8b96;
}
<button class="popmake-contacte-nos">Contacte-nos</button>
Just add color to your hover selector
.popmake-contacte-nos {
background-color: #fffff7;
/* Green */
border: none;
color: black;
font-weight: bold;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.popmake-contacte-nos:hover {
background-color: #3c8b96;
color: white;
}
<button class="popmake-contacte-nos">Contacte-nos</button>
I was trying to get this look for my email page:
However, I am stuck. Tried to do it with border. I guess it failed too. The icon on the upper left side is an image, rest should be css and html. I only managed to get this far: https://jsfiddle.net/ru9L8c56/4/
CSS code:
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell {
padding: 10px;
}
.flexibleImage {
height: auto;
}
.bottomShim {
padding-bottom: 20px;
}
.imageContent,
.imageContentLast {
padding-bottom: 20px;
}
.nestedContainerCell {
padding-top: 20px;
padding-Right: 20px;
padding-Left: 20px;
}
/*////// GENERAL STYLES //////*/
body,
#bodyTable {
background-color: #F5F5F5;
}
#bodyCell {
padding-top: 40px;
padding-bottom: 40px;
}
#emailBody {
background-color: #FFFFFF;
border: 1px solid #DDDDDD;
border-collapse: separate;
border-radius: 4px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
color: #202020;
font-family: PT Sans;
font-size: 20px;
line-height: 125%;
text-align: Left;
}
p {
color: #202020;
font-family: Verdana;
font-size: 12px;
line-height: 130%;
text-align: Left;
}
.textContent,
.textContentLast {
color: #404040;
font-family: Helvetica;
font-size: 16px;
line-height: 125%;
text-align: Left;
padding-bottom: 20px;
}
.textContent a,
.textContentLast a {
color: #2C9AB7;
text-decoration: underline;
}
.nestedContainer {
background-color: #E5E5E5;
border: 1px solid #CCCCCC;
}
.emailButton {
background-color: #2C9AB7;
border-collapse: separate;
border-radius: 4px;
}
.buttonContent {
color: #FFFFFF;
font-family: Helvetica;
font-size: 18px;
font-weight: bold;
line-height: 100%;
padding: 15px;
text-align: center;
}
.buttonContent a {
color: #FFFFFF;
display: block;
text-decoration: none;
}
.emailCalendar {
background-color: #FFFFFF;
border: 1px solid #CCCCCC;
}
.emailCalendarMonth {
background-color: #2C9AB7;
color: #FFFFFF;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
}
.emailCalendarDay {
color: #2C9AB7;
font-family: Helvetica, Arial, sans-serif;
font-size: 60px;
font-weight: bold;
line-height: 100%;
padding-top: 20px;
padding-bottom: 20px;
text-align: center;
}
Help with the red parts in the image would be awesome. TY.
Creating the shape you want will take more than just border-radius, you can target specific corners of the div to have curves with this syntax:
border-radius: 45px 0 0 0;
or
border-radius: 0 45px 0 45px;
etc.
each number defines a different corner.
To add the slanted corners you'll need to add an :after element to the div/td, something along the lines of this:
div:after{
content: "";
position: absolute;
border-left: 45px solid transparent;
border-bottom: 45px solid transparent;
border-right: 45px solid red;
}
I've created a button but I'd like to align it within a container div so it looks like:
My code is:
body {
background-color: black;
}
.buttoncontainer {
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
#button2:hover {
background-color: #feb73b;
}
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 20px;
}
HTML
<div class="buttoncontainer">
start a free trial
</div>
Link to Fiddle
Any advice?
Apologies for not posting the links as pictures, I do not have enough reputation yet.
Remove margin-top: 20px; from your #button2 CSS
See the fiddle
Thus the CSS would be like
#button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
/* margin-top: 20px; */
}
UPDATE
See the updated fiddle
I've changed the padding in the css as padding: 14px 32px;. So it gets centered.
In button2' style :
Remove margin-top
Set display as block
Then :
width:100%;
height:100%;
box-sizing: border-box;
Fiddle : http://jsfiddle.net/by3pe47d/7/
So what I did was swap the id's and class and I added the button 2 class to the html.
I added a position: relative; attribute to the container so the insides would stay inside.
Also if you want to change the position of it like left, right, etc. you can.
I also changed the top margain to 2px instead of 20px
http://jsfiddle.net/by3pe47d/10/
Html-
<div id="buttoncontainer">
<div class="button2">
start a free trial
</div>
</div>
Css-
body {
background-color: black;
}
#buttoncontainer {
position: relative;
background-color: white;
border-radius: 5px;
padding: 5px 5px 5px 5px;
width: 285px;
height: 55px;
}
.button2 {
border: 1px solid black;
border-radius: 7px;
color: #fff;
text-decoration: none;
background-color: #fea710;
display: inline-block;
text-transform: uppercase;
font-size: 20px;
padding: 12px 32px;
font-family: arial;
letter-spacing: .5px;
font-weight: 400;
margin-top: 2px;
}
.button2:hover {
background-color: #feb73b;
}
Large Update
Saw the image that was removed and made a thing that mimics it. It will stay formatted even if you use the left, right, etc. attributes.
http://jsfiddle.net/by3pe47d/11/
So I have a button, but here's the issue. On Firefox only does it not completely fill up. As seen here
This is what it should look like
I'm not really sure what to do. Here's the CSS
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
}
And a demo http://jsfiddle.net/h7PXe/
Reason why it showing up is that you use line-height bigger than height of element.
Here you can see how box model is woking and were are outlines:
http://i.stack.imgur.com/Q6J6n.png
You can achieve the same look without using basic properties (then it will work in every browser)
.button-panel .button {
display: inline-block;
padding: 7px 0 5px;
border: 3px solid #6699FF;
width: 100%;
font-family: 'Avenir Next';
font-size: 27px;
font-weight: 300;
letter-spacing: 0.05em;
text-align: center;
background-color: #6699FF;
cursor: pointer;
}
http://jsfiddle.net/h7PXe/1/
Do height: 100%. You need to do this or else the browser won't know what to set the height to.
.button-panel .button {
-webkit-appearance: none;
border: none;
cursor: pointer;
height: 55px;
font-size: 27px;
letter-spacing: 0.05em;
text-align: center;
width: 100%;
font-family: 'Avenir Next';
display: inline-block;
font-weight: 300;
background-color: #6699FF;
outline: 3px solid #6699FF;
line-height: 59px;
height: 100%
}
And a demo.
I have made some buttons to link people from my site to social media pages and the text in the Google Plus one is too low and I would like it to go higher in the div but I am struggling to do this, my code is here on JS fiddle.
The buttons aren't complete yet, I just want to know how to get the text higher, cheers
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: central;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
Just add line-height:27px; to adjust g+
Code full class:
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:27px;
}
If i understand you correctly you are just trying to move the text inside of those circle backgrounds higher.
If this is the case you can cheat it with line height as done in this fiddle
http://jsfiddle.net/9dj9u/2/
Which leaves the resulting CSS affected.
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
line-height:1.1;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 2px;
font-family: Garamond;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
vertical-align: middle;
line-height:0.8;
}
Just adjust line-height in percentage values: line-height: 50%, keep increasing or decreasing till you get there, you might also want to adjust padding, and box-sizing... and remove vertical-align
Remember, this isn't quite exact science, because you do not intend the g and the f to stand next to each other like they do in a sentence, watch this: fg, notice how the g normally is indeed lower than the f.
i included the correct vertical-align value and adjusted the height and width
.FaceBook {
color: black;
font-size: 35px;
border-radius: 100px;
padding: 5px;
font-family: Calibri;
font-weight: bold;
height: 40px;
width: 40px;
background-color: #D8D8D8;
text-align: center;
}
a:hover .FaceBook {
background-color: #4c66a4;
color: white;
}
#footer .FaceBook {
display: inline-block;
}
.GooglePlus {
color: black;
font-size: 35px;
border-radius: 100px;*/
border-bottom: 2px solid black;
padding: 2px;
font-family: garamond;
font-weight: bold;
height: 50px;
width: 50px;
background-color: #D8D8D8;
text-align:center ;
vertical-align: text-bottom;
padding: 0px;
}
a:hover .GooglePlus {
background-color: #FE2E2E;
color: white;
}
#footer .GooglePlus {
display: inline-block;
}
#plus {
font-size: 20px;
padding:0px 0px;
}
a {
text-decoration: none;
}