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>
Related
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
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'm using a CSS3 for my buttons. I noticed that whenever I click on any of the buttons, a rectangular blue highlight comes out around the button. I don't know if there's any way I can take it off. Here's my code:
.navbar-custom {
background-color:#000000;
color:#ffffff;
border-radius:0;
height:100px;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 0.6em;
color: #e74c3c;
cursor: pointer;
display: flex;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn:hover, .btn:focus {
color: #fff;
outline: 0;
}
.sixth {
border-radius: 3em;
border-color: #ec6800;
color: #FFF;
background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%);
background-position: 0 0;
background-size: 200%;
transition: background 150ms ease-in-out, color 150ms ease-in-out;
}
</style>
</head>
<body>
<nav class="navbar navbar-custom">
<ul class="nav navbar-nav navbar-right">
<button class="btn sixth">SIGN UP</button>
</ul> </nav>
</body>
The button already has the property outline: 0; which should take care of this, there must be some CSS overriding this property, you use either outline:none or outline:0, both basically do the same thing, refer here so modify the property to.
Before:
.btn:hover, .btn:focus {
color: #fff;
outline: 0;
}
After:
.btn:focus {
color: #fff;
outline: 0 !important;
}
.navbar-custom {
background-color: #000000;
color: #ffffff;
border-radius: 0;
height: 100px;
}
.btn {
box-sizing: border-box;
appearance: none;
background-color: transparent;
border: 2px solid #e74c3c;
border-radius: 0.6em;
color: #e74c3c;
cursor: pointer;
display: flex;
align-self: center;
font-size: 1rem;
font-weight: 400;
line-height: 1;
margin: 20px;
padding: 1.2em 2.8em;
text-decoration: none;
text-align: center;
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
}
.btn:hover,
.btn:focus {
color: #fff;
outline: none !important;
}
.sixth {
border-radius: 3em;
border-color: #ec6800;
color: #FFF;
background-image: linear-gradient(to bottom, transparent 50%, #2ecc71 50%);
background-position: 0 0;
background-size: 200%;
transition: background 150ms ease-in-out, color 150ms ease-in-out;
}
<nav class="navbar navbar-custom">
<ul class="nav navbar-nav navbar-right">
<button class="btn sixth">SIGN UP</button>
</ul>
</nav>
Box-shadow helps in some cases
.btn:focus,.btn:active {
outline: none !important;
box-shadow: none !important;
}
I'm trying to make the white "Contact US" text remain active or white, while the user rolls over the button and then hovers down to the list of links. I feel like I'm just circling a very simple answer. You'll notice it turns from red to white and then back to red when you rollover the dropdown menu. How do I keep it white when you rollover the menu below it?
I'm still in the process of cleaning up the code and adjusting the button, but I stripped out all the unnecessary bits.
JSFiddle: https://jsfiddle.net/hvj675mo/6/
<style>body {
background-color: #000000;
}
.new-contact-us {
background-color: transparent;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
border: 2px solid #ce1818;
display: inline-block;
cursor: pointer;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
line-height: 10px;
color: #ce1818;
}
.new-contact-us:hover {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.new-contact-us:active {
position: relative;
/*top:1px;*/
color: #ffffff;
background-color: #ce1818;
}
/**** START BOX DIV ****/
.new-contact-us-box {
position: relative;
display: block;
}
.new-contact-us-box:active {
color: #ffffff;
}
/**** START DROPDOWN ****/
.new-contact-us-box ul li {
padding-bottom: 10px;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ababaa;
text-transform: none;
}
.new-contact-us-box ul li a {
color: #ce1818;
text-decoration: none;
}
.new-contact-us-box ul li a:hover {
text-decoration: underline;
}
.new-contact-us-box ul li a:active {
text-decoration: underline;
}
.container-contact {
float: left;
width: 296px;
margin 0px;
}
.new-contact-us-box ul {
padding-left: 0px;
list-style: none;
margin: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover {
position: relative;
display: inline-block;
background-color: #ce1818;
color: #ffffff;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
left: auto !important;
right: 0 !important;
}
</style>
<div style="width: 700px; padding-left: 600px">
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->
<div class="new-contact-us-box dropdown">
CONTACT US
<div class="dropdown-content">
<ul style="width: 296px; left: auto !important; right: 0 !important; padding: 20px;">
<li>
<div class="container-contact">
<ul>
<li>Hello</li>
<li><img src="####" style="margin-right: 10px;">#########</li>
<li style="margin-left: 28px; margin-top: -9px"> BlAH BLAH</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->
You have hover on both .new-contact-us-box and .new-contact-us. So you can change this:
.new-contact-us:hover {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
to this:
.new-contact-us-box:hover .new-contact-us {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
See demo below:
body {
background-color: #000000;
}
.new-contact-us {
background-color: transparent;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
border: 2px solid #ce1818;
display: inline-block;
cursor: pointer;
font-family: Arial;
font-size: 14px;
font-weight: bold;
padding: 14px 14px;
text-decoration: none;
line-height: 10px;
color: #ce1818;
}
.new-contact-us-box:hover .new-contact-us {
background-color: #ce1818;
font-family: Arial;
font-size: 14px;
font-weight: bold;
color: #ffffff;
}
.new-contact-us:active {
position: relative;
/*top:1px;*/
color: #ffffff;
background-color: #ce1818;
}
/**** START BOX DIV ****/
.new-contact-us-box {
position: relative;
display: block;
}
.new-contact-us-box:active {
color: #ffffff;
}
/**** START DROPDOWN ****/
.new-contact-us-box ul li {
padding-bottom: 10px;
font-size: 16px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ababaa;
text-transform: none;
}
.new-contact-us-box ul li a {
color: #ce1818;
text-decoration: none;
}
.new-contact-us-box ul li a:hover {
text-decoration: underline;
}
.new-contact-us-box ul li a:active {
text-decoration: underline;
}
.container-contact {
float: left;
width: 296px;
margin 0px;
}
.new-contact-us-box ul {
padding-left: 0px;
list-style: none;
margin: 0px;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:hover {
position: relative;
display: inline-block;
background-color: #ce1818;
color: #ffffff;
-moz-border-radius: 9px;
-webkit-border-radius: 9px;
border-radius: 9px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #ffffff;
min-width: 160px;
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
left: auto !important;
right: 0 !important;
}
</style>
<div style="width: 700px; padding-left: 600px">
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING--->
<div class="new-contact-us-box dropdown">
CONTACT US
<div class="dropdown-content">
<ul style="width: 296px; left: auto !important; right: 0 !important; padding: 20px;">
<li>
<div class="container-contact">
<ul>
<li>Hello</li>
<li><img src="####" style="margin-right: 10px;">#########</li>
<li style="margin-left: 28px; margin-top: -9px"> BlAH BLAH</li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-----WILL REMOVE THIS DIV AFTER. HERE FOR TESTING---->
Change your CSS
.new-contact-us:hover {
background-color:#ce1818;
font-family:Arial;
font-size:14px;
font-weight:bold;
color: #ffffff;
}
to this:
.dropdown:hover .new-contact-us {
background-color:#ce1818;
font-family:Arial;
font-size:14px;
font-weight:bold;
color: #ffffff;
}
When you hover over the image, you will see that it will be replaced by the text block.
When you shrink the browser, you will see that the font size remains the same, although I specified it in EMs which should have made the font responsive.
I need the layout of the hover element remain the same in mobile view, i.e. I need to avoid the scrollbar that appears if you shrink the size of the browser. Any ideas how to achieve this?
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 1.250em;
font-family: Roboto;
line-height: 1em;
font-weight: 300;
text-align: center;
overflow-y: auto;
box-sizing: border-box;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 1.750em;
font-size: 1.500em;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 1.5em !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 3.125em;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 2.375em; font-family: Montserrat; font-weight: 600; line-height: 1em; letter-spacing: 0.125em;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 0.125em solid #ffffff; width: auto; margin: 0.625em 1.875em;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 0.625em; padding-top: 0.313em; padding-bottom: 0.313em; padding-left: 1.875em; padding-right: 1.875em; text-decoration: none; font-size: 1.500em; font-weight: 600; border: 3px solid white; letter-spacing: 0.125em;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>
You can simply set the font size in vw instead of em
/*Programs*/
ul.img-list {
list-style-type: none;
margin: 0;
padding: 0;
text-align: center;
}
ul.img-list li {
display: inline-block;
width: 100%;
height: 100%;
margin: 0;
position: relative;
}
div.text-content {
background: rgba(26,33,43,0.9);
color: white;
cursor: pointer;
left: 0;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
font-size: 3vw;
font-family: Roboto;
line-height: 1em;
font-weight: 300;
text-align: center;
overflow-y: auto;
box-sizing: border-box;
padding-right: 25px;
padding-left: 25px;
padding-top: 25px;
padding-bottom: 25px;
-webkit-transition: opacity 500ms;
-moz-transition: opacity 500ms;
-o-transition: opacity 500ms;
transition: opacity 500ms;
text-align: center;
vertical-align: middle;
}
ul.img-list li:hover div.text-content {
opacity: 1;
}
/* Events page */
/*Event link button*/
.btn {
background-color: transparent;
border-radius: 42px;
border: 2px solid #ffffff;
display: inline-block;
cursor: pointer;
font-family: Roboto;
line-height: 1.750em;
font-size: 1.500em;
padding: 5px 15px 5px 15px;
margin-right: 45px;
margin-left: 45px;
}
.btn:link {
color: #ffffff;
text-decoration: none;
}
.btn:visited {
color: #1b1c16;
text-decoration: none;
}
.btn:hover {
background-color: #ffffff;
color: #1b1c16 !important;
}
.btn:active {
position: relative;
top: 1px;
}
/*All events button*/
.evens_btn {
background: ;
}
.events_btn>span{
color: #f9c70f;
font-family: Roboto;
color: #ffffff;
font-size: 1.5em !important;
background: ;
text-decoration: none !important;
padding: 10px 0px 10px 0px;
}
.events_btn>i{
color: #ffffff;
margin-right: 15px;
font-size: 3.125em;
}
.events_btn:link>i {
color: #f9c70f;
}
.events_btn:visited>i {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>i {
color: #f9c70f;
}
.events_btn:active>i {
color: #f9c70f;
}
.events_btn:link>span {
color: #f9c70f;
}
.events_btn:visited>span {
color: #ffffff;
text-decoration: none;
}
.events_btn:hover>span {
color: #f9c70f ;
}
.events_btn:active>span {
color: #f9c70f;
}
<ul class="img-list">
<li><img style="width: 100%; height: 100%;" src="http://www.sflsupport.org/wp-content/uploads/2016/06/Programs-11.jpg" />
<div class="text-content">
<div>
<h5 style="color: white; font-size: 2.375em; font-family: Montserrat; font-weight: 600; line-height: 1em; letter-spacing: 0.125em;">WEBINAR<br/>ARCHIVE</h5>
<hr style="border-top: 0.125em solid #ffffff; width: auto; margin: 0.625em 1.875em;"/>Throughout the years SFL has ammased the library of recorded webinars from some of the leading libertarian voices about numerous topics in philosophy, politics, and economics. How can the government fix the higher education bubble? What is Ayn Rand's theory of natural rights? Tune in to our videos for answers to these questions and many more.
<br>
<a class="btn" style="color: white; text-align: center; margin-top: 0.625em; padding-top: 0.313em; padding-bottom: 0.313em; padding-left: 1.875em; padding-right: 1.875em; text-decoration: none; font-size: 1.500em; font-weight: 600; border: 3px solid white; letter-spacing: 0.125em;" href="http://www.google.com/" target="_blank">READ MORE</a>
</div>
</div>
</li>
</ul>