I am using a CSS button code, but I found some problem in doing it. I want that the width of my button should get fixed for the mobile view but it should be auto for the window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
CSS code :
.button1
{
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2
{
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 a:link, .button2 a:visited
{
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active
{
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px)
{
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}
HTML code:
<button class="button button1">
BUY NOW
</button>
<button class="button button2">
DETALS
</button>
For a start, change the button display from inline-table to inline-block
Related
I want that the size of my button should get fixed for the mobile view but it should be auto for window. how can I do it, please help? Or it should be auto placed in the center. I am using this code. I am using CSS like this.
.button1 {
border: 2px solid rgb(0, 0, 0);
box-sizing: inherit;
background-color: #ffffff;
margin-right: 1.7px;
color: black;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;
}
.button2 {
border: 2px solid rgb(255, 87, 51);
background-color: #FF5733;
box-sizing: inherit;
margin-right: 1.7px;
color: white;
font-size: 18px;
font-weight: 980;
padding: 6px 42px;
text-align: center;
transition: all 0.3s ease-in-out 0s;
width: 96.6px;
text-decoration: none;
line-height: 22px;
font-size: 16px;
font-family: domine;
display: inline-table;}
.button2 a:link, .button2 a:visited {
background-color: #FF5733;
color: white;
text-decoration: none;
}
.button2 a:hover, .button2 a:active {
background-color: #FF5733;
color:#000000;
}
#media screen and (max-width: 680px) and (min-width:0px){
.button2 { padding: 6px 32px;width: 85px;display: inline-table;max-height:80px;
}
.button1 { padding: 6px 32px;width: 85px;max-height:88px;}
}}
<button style="margin:auto"class="button button1">BUY NOW</button><button style="margin:auto;" class="button button2">DETALS</button>
Could the issue be that you have the button style set to auto in your inline CSS in your html page? That would override the margins you are setting in your CSS page. Maybe that is effecting the way the buttons are being displayed, because the media query looks good. I really hope this helps. Good luck!
I want to change the font color background color on hover of the button text and the icon.
body {
background-color: black;
}
.button {
background-color: white;
border: 2px solid transparent;
border-radius: 2em;
color: #eff6f9;
display: inline-block;
font-family: Merriweather, Arial, sans-serif;
font-weight: 300;
font-style: italic;
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 1;
padding: 1em 2em;
text-shadow: none;
transition: background-color 0.125s ease-in;
margin-top: 3em;
}
.button a {
font-size: 2em;
text-decoration-line: none;
color: black;
text-decoration: none
}
.button:hover,
.button:focus,
.button:active {
background-color: transparent;
border-color: white;
color: white;
}
.shop:hover>span,
.shop:focus>span,
.shop:active>span {
color: white;
}
a:focus,
.button a:hover {
text-decoration: none;
}
<body>
<div class="button" id="bu">
<a class="shop" href="https://app.nmpl.store/">
<span>Order Now</span>
<i class="fas fa-shopping-cart"></i>
</a>
</div>
Currently When I hover over the button only the border changes first and then the text in between the button, I want to change the color and background of the entire button when I hover just on the border also.
pointer outside button
Pointer on edge of button
Pointer on text
Really good example on why it's important to use the correct elements for the right job. Don't use divs where you don't need them.
Get rid of the div and use a simple link element that you style to look like your button.
body {
background-color: black;
}
.button {
background-color: white;
border: 2px solid transparent;
border-radius: 2em;
display: inline-block;
font-family: Merriweather, Arial, sans-serif;
font-weight: 300;
font-style: italic;
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 1;
padding: 1em 2em;
text-shadow: none;
transition: background-color 0.125s ease-in;
margin-top: 3em;
text-decoration-line: none;
text-decoration: none;
color: black;
}
.button:hover,
.button:focus,
.button:active {
background-color: transparent;
border-color: white;
color: white;
}
a:focus {
text-decoration: none;
}
<a class="button" href="https://app.nmpl.store/">
<span>Order Now</span>
<i class="fas fa-shopping-cart"></i>
</a>
I've just changed a couple of things in your code:
HTML
<body>
<div id="bu">
<a class="shop button" href="https://app.nmpl.store/">
Order Now <i class="fas fa-shopping-cart"></i>
</a>
</div>
CSS
body {
background-color: black;
}
.button {
background-color: white;
border: 2px solid #FFF;
border-radius: 35px;
color: #000;
display: inline-block;
font-family: Merriweather, Arial, sans-serif;
font-weight: 300;
font-style: italic;
font-size: 15px;
font-weight: bold;
letter-spacing: 1px;
line-height: 1;
text-decoration:none;
padding: 20px 30px;
text-shadow: none;
transition: background-color 0.125s ease-in;
margin-top: 3em;
}
.button:hover,
.button:focus,
.button:active {
background-color: transparent;
border-color: white;
color: white;
}
Hope that helps you :)
Try the bellow snippet
In this, I have changed
.shop:hover>span,
.shop:focus>span,
.shop:active>span {
color: white;
}
To
.shop:hover>a>span,
.shop:focus>a>span,
.shop:active>a>span {
color: white;
}
.button {
background-color: white;
border: 2px solid transparent;
border-radius: 2em;
color: #eff6f9;
display: inline-block;
font-family: Merriweather, Arial, sans-serif;
font-weight: 300;
font-style: italic;
font-size: 0.7rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 1;
padding: 1em 2em;
text-shadow: none;
transition: background-color 0.125s ease-in;
margin-top: 3em;
}
.wrapper{
height:200px;
width:200px;
padding:10px;
background-color:yellow;
}
.button a {
font-size: 2em;
text-decoration-line: none;
color: black;
text-decoration: none
}
.button .fa-w-18 {
color: black;
margin-left: 5px;
}
.button:hover,
.button:focus,
.button:active {
background-color: transparent;
border-color: white;
color: white;
}
.shop:hover>.fa-w-18,
.shop:focus>.fa-w-18,
.shop:active>.fa-w-18 {
color: white;
}
.button:hover>a>span,
.button:focus>a>span,
.button:active>a>span {
color: white;
}
a:focus,
.button a:hover {
text-decoration: none;
}
<div class="wrapper">
<div class="button" id="bu">
<a class="shop" href="https://app.nmpl.store/">
<span>Order Now</span>
<i class="fas fa-shopping-cart"></i>
</a>
</div>
</div>
Please offer some advice and suggestions as to how to enable a mobile first responsive header. i cant seem to keep my content to the left when at mobile screen size also i need the header and back button to be the same size. Also when at a full screen size the header area doesn't spread. i use Flex-box but finding it difficult to align this particular content in the header. Any advise suggestions would be more than appreciated.
.header {
display: flex;
justify-content: space-between;
background: #633;
padding: 10px 10px;
}
.header a {
float: left;
color: black;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
justify-content: center;
}
.header a:hover {
color: black;
}
.logo {
display: flex;
align-items: flex-start;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.home-button {
display: inline-block;
border: none;
padding: 1rem 2rem;
margin-right: 20px;
border-radius: 4px;
text-decoration: none;
background: dodgerblue;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.header-right {
float: right;
}
a.home-button:hover,
a.home-button:focus {
background: #434344;
}
#media only screen and (min-width: 300px) {
.header,
.header a,
.home-button,
.logo {
display: flex;
justify-content: flex-start;
float: none;
display: block;
padding: 5px;
}
.header-right {
float: none;
}
}
/* end of header*/
/***********************************************
**********************************************
*********************************************/
/* Back button CSS*/
.button {
display: inline-block;
border: none;
padding: 1rem 2rem;
margin-right: 20px;
border-radius: 4px;
text-decoration: none;
background: dodgerblue;
color: #ffffff;
font-family: sans-serif;
font-size: 1rem;
cursor: pointer;
text-align: center;
transition: background 250ms ease-in-out, transform 150ms ease;
-webkit-appearance: none;
-moz-appearance: none;
}
.button:hover,
.button:focus {
background: #434344;
}
.button:focus {
outline: 1px solid #fff;
outline-offset: -4px;
}
.button:active {
transform: scale(0.99);
}
<div class="header">
<div class="header-right">
<img src="images/cw_logo.png" alt="company-logo">
<a class="home-button" href="#home">Home</a>
<a class="email" href="email#emailyou.com">email#emailyou.com</a>
<a href="#about">
<p>1234567890</p>
</a>
<button class="button" onclick="goBack()">Go Back</button>
</div>
</div>
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>
How can I make the color of the text turn to black not only when I move the mouse cursor to the text, but also when the cursor enters the whole button area?
.button {
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236, 229, 167, 0.2);
transition: 0.35s;
}
.button a, active {
text-decoration: none;
color: #e7dd84;
}
.button a:hover {
text-decoration: none;
color: black;
}
.button:hover {
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>
Do you mean like this?
.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
transition: 0.35s;
}
.button a, active
{
text-decoration: none;
color: #e7dd84;
}
.button:hover a
{
text-decoration: none;
color: black;
}
.button:hover
{
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>
Instead of styling the <div>, I suggest to do it on the <a> tag directly.
I would use inline block, so that you don't need to specify the width, as inline block has the ability of shrink-to-fit based on length of the text. And on the container all you need is text-align:center to center that button horizontally.
Hover on the edges of the button you'll see the link also becomes available, because we set padding on it directly. Unless your original demo, you'll have to hover on the text to be able to click. This small improvement makes it more accessible, less confusing.
I also moved the class button onto the <a>, and add container to the <div>.
jsfiddle
.container {
text-align: center;
}
.button {
text-decoration: none;
background-color: rgba(236, 229, 167, 0.2);
border: 2px solid #e7dd84;
color: #e7dd84;
display: inline-block;
font-size: 1.5em;
padding: 8px;
transition: 0.35s;
}
.button:hover {
text-decoration: none;
background-color: white;
border-color: white;
color: black;
}
<div class="container">
<a class="button" href="first.html">Go to site</a>
</div>
You have to give the color change to the link when you hover on the button.
Currently you have given the color to change when hoverd on the link inside the button.
Check updated snippet.
.button
{
text-align: center;
font-size: 1.5em;
margin: 0 auto;
width: 15%;
padding: 8px;
border: 2px solid;
border-color: #e7dd84;
background-color: rgba(236,229,167,0.2);
transition: 0.35s;
}
.button a, active
{
text-decoration: none;
color: #e7dd84;
}
.button:hover a
{
text-decoration: none;
color: black;
}
.button:hover
{
color: black;
background-color: white;
border-color: white;
transition: 0.35s;
}
<div class="button">
Go to site
</div>