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;
}
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
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>
You can see the grey-ish shadow background underneath the text on the button on regular view and upon hovering. I'm not sure if it's because of the bootstrap theme I am using (relatively new + self-teaching). Any help is appreciated! Thanks.
CODEPEN: https://codepen.io/minacosentino/pen/JyBQxM
.btn-primary {
font-family: "Montserrat", arial, sans-serif;
font-weight: 400;
text-transform: uppercase;
letter-spacing: .25rem;
text-indent: .75rem;
margin-bottom: 5rem;
background: #4fd2c2;
border-color: #4fd2c2;
color: #fff;
border: none;
border-radius: 3rem;
height: 30px;
padding: 2rem 4rem;
font-size: 1.25rem;
line-height: 0rem;
}
.btn-primary:hover {
background: #ffffff;
color: #4fd2c2;
border: 2px solid #4fd2c2;
}
Try this on .btn-primary
text-shadow:none;
https://codepen.io/anon/pen/PKVByp
The .btn-primary has a :hover css with box-shadow property which cause the d3-like effect when you hover that button:
.btn-primary:hover {
background: #4fd2c2;
border-color: transparent;
box-shadow: 0rem 0.75rem 3rem #D8D8D8;
transition: .5s ease-in-out !important;
}
Here is a snippet for that:
.btn-primary {
background: #4fd2c2;
border-radius: 25px;
display: inline-block;
padding: 10px;
}
.btn-primary:hover {
border-color: transparent;
box-shadow: 0rem 0.75rem 3rem #D8D8D8;
transition: .5s ease-in-out !important;
}
<div class="btn-primary">This is a test</div>
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>
I want my btn class to be shifted right. I have two button classes eg. btn-full, btn-ghost, I want to shift both of them to the right, if I float it to right then their position changes, I don't know why.
<head>
<link rel="stylesheet" type="text/css" href="vendors/css/normalize.css">
<link rel="stylesheet" type="text/css" href="vendors/css/grid.css">
<link rel="stylesheet" type="text/css" href="resources/css/style.css">
<link href='https://fonts.googleapis.com/css?family=Lato:400,100,300,300italic' rel='stylesheet' type='text/css'>
<title>Musica</title>
</head>
<body>
<header>
<div class="hero-text-box">
<h1>Life is the Song.<br> Love is the Music.</h1>
<a class= "btn btn-full" href="#">Listen </a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial',sans-serif;
font-weight: 300px;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
h1{
float: right;
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
margin-top: 150px;
}
.btn-full:link,
.btn-full:visited{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #2ecc71;
color: #2ecc71;
}
.btn:hover,
.btn:active{
background-color: #1e874b;
}
.btn-full:hover,
.btn-full:active{
border: 1px solid #1e874b;
}
.btn-ghost:hover,
.btn-ghost:active{
border: 1px solid #1e874b;
color: #fff;
}
I tried everything like float:right, the position:absolute; ;left:-5oo; but it doesnot work. Please help
Maybe you want something like this ?
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html{
background-color: #fff;
color: #555;
font-family: 'Lato','Arial',sans-serif;
font-weight: 300px;
font-size: 20px;
text-rendering: optimizeLegibility;
}
.row{
max-width: 1140px;
margin: 0 auto;
}
header{
background-image:linear-gradient(rgba(0, 0, 0, 0.8),rgba(0, 0, 0, 0.8)),url(img/hero.jpg);
background-size: cover;
background-position: center;
height: 100vh;
}
.hero-text-box{
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align:right;
}
h1{
margin: 0;
margin-bottom: 20px;
color: #fff;
font-size: 240%;
font-weight: 300;
text-transform: uppercase;
letter-spacing: 1px;
word-spacing: 4px;
}
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
}
.btn-full:link,
.btn-full:visited{
background-color: #2ecc71;
border: 1px solid #2ecc71;
color: #fff;
margin-right: 15px;
}
.btn-ghost:link,
.btn-ghost:visited{
border: 1px solid #2ecc71;
color: #2ecc71;
}
.btn:hover,
.btn:active{
background-color: #1e874b;
}
.btn-full:hover,
.btn-full:active{
border: 1px solid #1e874b;
}
.btn-ghost:hover,
.btn-ghost:active{
border: 1px solid #1e874b;
color: #fff;
}
</style>
<body>
<header>
<div class="hero-text-box">
<div><h1 style="display:inline-block; text-align:left;">Life is the Song.<br> Love is the Music.</h1></div>
<a class= "btn btn-full" href="#">Listen </a>
<a class="btn btn-ghost" href="#">Show me more</a>
</div>
</header>
</body>
EXP:
.btn:link,
.btn:visited{
display: inline-block;
padding: 10px 30px;
font-weight: 300;
text-decoration: none;
border-radius: 200px;
color: #fff;
transition: background-color 0.2s, border 0.2s, color 0.2s;
margin-top: 150px;
}
margin-top: 150px; //You were trying to manually place the buttons with this line I suggest, you could've get away with it if you adjusted the positioning of the buttons, but this would be a bad practice.
Instead, I just Ordered the div to have its content aligned to the right,
and put the H1 inside a div, then align the H1 to the left in order to have a perfectly left aligned text.