hopefully you can help with a simple question about CSS. I'm trying to make a button (doesn't need to be html class button) with a transparent background and an outline with text that does not have the same opacity as the button. That is, the text should remain at a different opacity than the button. Is this possible?
My attempt at a fiddle to solve this here - http://jsfiddle.net/9jXYt/
CSS:
#xxx {
outline:white solid 0.5px;
/*opacity: 0.2; */
background-color: rgba(255,0,0,0.2);
padding: 6px 8px;
border-radius: 3px;
color: black;
font-weight: bold;
border: none;
margin: 0;
/*box-shadow: 0px 2px 3px #444;*/
}
#xxx:hover {
opacity: 0.9;
}
#fff {
font-family: helvetica, arial, sans-serif;
font-size: 19pt;
opacity: 1 !important;
color: rgba(0,0,0,0.5) !important;
}
HTML:
<button id="xxx"><div id="fff">This is a test</div></button>
Thanks in advance for any hints.
opacity is inherited by children and can't be reversed, so use rgba on the parent as well. E.g.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
#xxx {
outline:white solid 0.5px;
padding: 6px 8px;
border-radius: 3px;
color:rgba(0,0,0,0.4);
font-weight: bold;
border: none;
margin: 0;
background: rgba(0,0,0,0.2);
font-family: helvetica, arial, sans-serif;
font-size: 19pt;
}
#xxx:hover {
background: rgba(0,0,0,0.4);
color:rgba(0,0,0,0.8);
}
</style>
</head>
<body>
<button id="xxx">This is a test</button>
</body>
</html>
I think the secret to what you're trying to do is to use transparent colors rather than opacity.
#xxx {
outline:white solid 0.5px;
padding: 6px 8px;
border-radius: 3px;
background-color: rgba(0,0,0, .25);
color: black;
font-weight: bold;
border: none;
margin: 0;
}
#xxx:hover {
background-color: rgba(0,0,0,.30);
}
#fff {
font-family: helvetica, arial, sans-serif;
font-size: 19pt;
color: rgba(0,0,0,.25);
}
#fff:hover {
color: rgba(0,0,0,.6);
}
I've adapted your fiddle: http://jsfiddle.net/harveyramer/8pymY/
#xxx:hover {
background-color: rgba(255,0,0,0.9);
}
By setting your opacity you are affecting everything in it.
As ralph.m said,
opacity is inherited by children and can't be reversed, so use rgba on the parent as well. In case you need an example, here is an edited jsfiddle.
http://jsfiddle.net/9jXYt/3/
Good luck!
Related
Is there a way, with css, to properly transition the border between two elements, while having a shared border (or some trick that simulates it)?
I am trying to get a situation like this (note: if there are any abhorrent wrong-doings in my css, please mention. I am not very experienced with css):
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.1em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
}
#container > :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>
Where the double border in between is "solved" by applying a negative margin (perhaps an alternative would be better?).
The middle border should:
stay white, when switching mouse hover from one button to the other
go from black to white, if neither was hovered before
go from white to black, when the mouse leaves the entire area
But in the above case, there are two overlapping borders, and one element is always on top. Playing with the z-index fails, when moving the mouse from one button to the next (instantly goes black, then transitions back to white). Setting no transition time for e.g. the left border fails, when moving the mouse in from the outside (left border is instant, obviously).
It's likely something, that should be assisted by javascript, but all too often, there is some trick, to achieve the desired behavior anyways.
As a note, the buttons in reality are vue router-link (and targeted by a class). I don't think that's too important though, but maybe switching to a table, and using border-collapse, or something similar, may work (didn't on basic tests).
After you hovered 1st button, you need to change a left border color of the second button.
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.1em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
}
a:hover:first-child+a {
border-left-color: #ffffff;
border-radius: 0 0.12em 0.12em 0;
}
#container> :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>
The solution would be to add a z-index to the :hover. I've also changed the negative margin to -0.2em.
z-index controls which elements show on top, setting it on :hover forces the element that receives the hover to appear on top (including its borders).
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.2em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
z-index: 999;
}
#container > :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>
I'm struggling to add a transparent background to my button.
I know it's quite simple but I'm not sure what I'm doing wrong for it not to take effect.
The Html code I've written:
<div class="footer-text-cta">
<p>Want to know what equipment I use when I go kayaking?<button class="green-button">I want to know!</button></p>
</div>
My CSS code:
button.green-button{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 7px 20px !important;
border-radius: 5px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 3px solid #1ec279;
border-radius: 5px;
}
button.green-button a {
text-decoration: none;
color: #fff;
}
button.green-button a:hover{
background-color: transparent;
color: #1ec279;
}
I've added an image of what I'm trying to get the button to look like below.
Here you go with a nice transition XD
button.green-button{
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 7px 20px !important;
border-radius: 5px;
margin: 0px 0px 0px 20px;
background-color: #1ec279;
border: 3px solid #1ec279;
border-radius: 5px;
transition: 0.8s;
}
button.green-button a {
text-decoration: none;
color: #fff;
}
button.green-button:hover{
background-color: rgba(255,255,255,0);
cursor: pointer;
}
button.green-button:hover a{
color: #1ec279;
}
<div class="footer-text-cta">
<p>Want to know what equipment I use when I go kayaking?<button class="green-button">I want to know!</button></p>
</div>
The only trick to a button like this is that there is a border. I'm going to assume that on :hover you want the background to appear, as this seems to be the most common usage for these ghost or outline button styles.
That being the case your code might look something like this:
.button-example {
padding: 15px;
background: #000;
}
.button {
display: inline-block;
padding: 10px 15px;
font-family: Helvetica, Arial, sans-serif;
border: 3px solid #aaa;
border-radius: 6px;
cursor: pointer;
}
.button-green {
background: #1ec279;
border-color: #1ec279;
color: #fff;
}
.button-green.button-outline {
background: none;
}
.button-green:hover {
background: #19a969;
border-color: #19a969;
}
<div class="button-example">
<button class="button button-green">
I am a green button
</button>
<button class="button button-green button-outline">
I am a green outline button
</button>
<button class="button">
I am a sad, colorless button
</button>
</div>
I have some CSS that works well in Chrome, FireFox, and IE, but looks very strange in Opera.
Link to the fiddle
Also, I took screenshots:
This what happens on just forgot link hover:
This happens on form focus (complete disaster):
Normal look in Chrome:
Submit button on focus loses it's border color (why in hell?!)
Some mess on focus, I can't explain, just take a look on second pic
I tested on the latest version of Opera. What the hell is wrong with this browser? Even IE8 shows everything as I expect it.
CSS:
.sign_in {
position: fixed;
top: 50%;
left: 50%;
margin-top: -100px;
margin-left: -255px;
background: #ffffff;
width: 510px ;
height: 240px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
z-index: 9999999;
font-size: 14px;
-webkit-box-shadow: 0 0 5px black;
-moz-box-shadow: 0 0 5px black;
box-shadow: 0 0 5px black;
}
.signs_form{
border-right-style: solid;
border-color: rgba(80, 140, 255, 0.83);
border-width: 1px;
margin-top: 40px;
vertical-align: 100%;
margin-left: 50px;
padding-right: 50px;
font-weight: 500;
display: inline-block;
}
input#email{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#email:focus{
border-color: rgba(2, 22, 222, 0.97);
}
input#password{
border-style: solid;
border-color: #378de5;
border-width: 1px;
padding: 3px 3px 3px 3px;
font-size: 14px;
outline: none;
font-style: normal;
font-weight: 400;
}
input#password:focus{
border-color: rgba(2, 22, 222, 0.97);
}
.sign_in_submit {
margin-top: 0;
border: solid 1px #378de5;;
background-color: #ffffff;
color: #378de5;
padding: 2px 5px 2px 5px ;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 16px;
font-weight: 500;
}
.sign_in_submit:hover {
cursor: pointer;
border-color: rgba(2, 22, 222, 0.97);
color: rgba(2, 22, 222, 0.97);
}
#close {
float: right;
padding-left:-10px;
padding-top: -10px;
margin-right: 5px;
}
#close_sign_in_popup {
text-decoration: none;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
font-size: 20px;
color: #d61354;
}
#close_sign_in_popup:hover {
color: #fc145f;
}
.forgot_pass{
display: block;
margin-top: 5px;
margin-bottom: 0;
margin-left: 2px;
font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
color: #378de5;
font-size: 13px;
font-weight: 400;
text-decoration: none;
}
.forgot_pass:hover{
height: 100%;
text-decoration: underline;
}
Forked http://jsfiddle.net/w29WQ/1/
.sign_in {
/*top: 50%; // so it seems the positioning gets all funky in opera
left: 50%;*/
margin-top: 0;
margin-left: 0;
/* Your other styles for this element */
}
Anyhow, seems your fixed positioning was causing errors, I simply commented out the top and left positioning in the containing div, and reset the margins to keep the element displayed.
Ok, guys.
1) Shifts in form
The reason is that Opera strongly dislikes inline-block as form property, which is quite logical, actually, but all other browser undertand this and it is convinient
2) Loosing border-color of submit button on field focus
But here - Opera bug, can be fixed by placing before real tag invisible copy - so it is like bait to this Opera bug.
I am having a very strange problem, and I'm not sure of the cause. Elements on my page are not sticking to their defined places, rather, they are 'jumping' upwards.
My current layout looks thus, with the HTML and CSS below:
HTML
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Screening - Your movie database | Discover. Watch. Share.</title>
<meta name="description" content="Screening is a brand new take on the traditional movie database, fusing social networking and multimedia to provide a clear, concise experience allowing you to share your favourite movies, and discover new classics.">
<meta name="keywords" content="Movies, Films, Screening, Discover, Watch, Share, experience, database, movie database, film database, share film, share films, discover film, discover films, share movie, share movies, discover movie, discover movies">
<link rel="stylesheet" href="stylesheet.css" type="text/css" />
<link rel="stylesheet" href="fonts.css" type="text/css" />
</head>
<body>
<header>
<p class="logo">Screening</p>
<nav>
<ul>
<li>Home</li>
</ul>
</nav>
<section id="header_search">
<form id="search" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</section>
</header>
<div id="content">
<div id="home_banner">
<h1>Discover. Watch. Share.</h1>
<h2>Screening. Your movie database.</h2>
</div>
<form id="homesearch" action="search.php" method="get">
<input type="text" title="name" name="title" placeholder="search for a movie">
</form>
</div>
<footer>
<p class="logo">Screening</p>
<nav>
<ul>
<li>Home | </li>
<li>About | </li>
<li>Privacy Policy</li>
</ul>
</nav>
<p id="copyright">©Screening 2012</p>
</footer>
</body>
</html>
CSS
/* HTML reset */
html, * {
margin: 0px;
padding: 0px;
}
/* General styling */
body {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
font-size: 1em;
color: white;
background-color: black;
line-height: 20px;
letter-spacing: 1.5px;
}
/*Custom link styles*/
a:link {
color: white;
background-color: transparent;
text-decoration: none;
-webkit-transition: color .4s linear;
-moz-transition: color .4s linear;
-ms-transition: color .4s linear;
-o-transition: color .4s linear;
transition: color .4s linear;
}
a:visited {
color: white;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: #b70000;
background-color: transparent;
text-decoration: underline;
}
.logo a:link {
text-decoration: none;
}
.logo a:hover {
color: #b70000;
background-color: transparent;
}
/* Header styling */
header {
margin-bottom: 20px;
}
header, footer {
height: 50px;
padding-left: 50px;
padding-right: 50px;
font-size: .75em;
clear: both;
}
header nav, .logo, footer nav {
float: left;
}
header nav, footer nav, #header_search, #copyright {
margin-top: 20px;
}
header li, footer li {
display: inline;
}
#header_search {
width: 200px;
float: right;
clear: right;
}
#search input, #homesearch input {
padding: 0px 20px 0px 20px;
color: #d7d7d7;
background-color: #2d3035;
border: solid 4px #2a2e31;
}
#search input:focus, #homesearch input:focus {
outline: none;
background-color: white;
color: #6a6f75;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
#search input {
width: 80%;
height: 25px;
font-size: 1.5em;
border-radius:15px;
-moz-border-radius:15px;
-webkit-border-radius:15px;
}
/* Logo styling */
.logo {
font-family: 'RobotoLtRegular', Verdana, Helvetica, Arial, sans-serif;
font-size: 3em;
width: 200px;
margin-right: 10px;
clear: left;
border: solid 1px red;
}
/* Content wrapper */
#content {
width: 90%;
max-width: 1500px;
margin: auto;
padding: 30px 15px 30px 15px;
clear: both;
overflow: auto;
background-color: rgba(203,203,203,0.2);
background-image: url(assets/images/bkg.png);
background-repeat: repeat;
}
/* Homepage */
#home_banner {
padding-top: 50px;
font-weight: normal;
text-align: center;
border: solid 1px red;
}
#home_banner h1 {
font-size: 5em;
clear: both;
border: solid 1px blue;
}
#home_banner h2, #search input, #homesearch input, #searchresults, #details .title {
font-family: 'RobotoThRegular', Verdana, Helvetica, Arial, sans-serif;
font-weight: normal;
}
#home_banner h2 {
font-size: 1.8em;
clear: both;
border: solid 1px yellow;
}
#homesearch {
width: 480px;
margin: 80px auto 70px auto;
clear: both;
}
#homesearch input {
width: 90%;
font-size: 2em;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
}
I have added borders to each element I am having trouble with for clarity purposes. I had originally laid out everything correctly, however something has cocked up somewhere and I can't for the life of me figure it out; I've been struggling with this for weeks! I'm pretty sure it's something small and simple, but the solution is completely avoiding me.
Obviously, the intended result should be something like below (ignore the presentation of the search bar, this is an early mockup before the search bar was amended):
Just kill the fixed line height for the body: line-height: 20px; <-- get rid of that.
You’ve set the line-height on <body> to 20px. Any elements without a line-height (e.g. your <h1> and <h2>) will inherit this line height size, even if their font size is much bigger.
It’s usually better to set line heights relative to the font size, i.e. don’t specify a pixel unit on them.
body {
...
font-size: 1em;
line-height: 1.25;/* This makes 20px the base line height, but it’ll get bigger for lines with a bigger font size */
http://jsfiddle.net/8ZBzt/
Could anyone show me some tutorials that make a button in css and doesn't require images? I googled it but everything involved images...
Thanks!
Um, define "button"? If you just want a basic button, you don't even need CSS, just use an HTML input or button tag...
<input type="button" value="Press me!" />
or
<button>Press me!</button>
If I understand you correctly, you want to make an arbitrary element look like a button?
Well ... just write CSS accordingly! Here's a kickoff example which makes a link look like a button:
<!DOCTYPE html>
<html lang="en">
<head>
<title>SO question 3489881</title>
<style>
a.button {
display: inline-block;
padding: 0 2px;
background: lightgray;
border: 2px outset lightgray;
cursor: default;
}
a.button:active {
border-style: inset;
}
</style>
</head>
<body>
<p><a class="button">link</a>
</body>
</html>
This one is kind of dull but gets the trick done!
h1 {
font-family: Arial;
}
a {
display: inline-block;
padding: 2 5px;
background: lightgray;
border: 5px outset lightgray;
cursor: default;
text-decoration:none;
color: black;
}
a:hover {
background: gray;
}
CSS:
.button{
background-color: #000;
color: #FF6600;
font: bolder 1.0em Tahoma;
border: 1px solid Yellow;
padding: 2px;
}
.button:hover{
border: 1px solid Red;
}
HTML:
<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>
Try it: http://jsfiddle.net/eD9sf/
There are some awesome examples here - Pure CSS Buttons - of buttons that don't need any images but are legit. I think that you could add some gradients to some of them, but otherwise they looks exactly like the ones on Facebook, Twitter, Wordpress, etc. If you don't know much CSS, I'd suggest that you just copy one of those examples.
This is a very simple design, but looks pretty good
body {
font-family: Helvetica, sans-serif;
font-size: .8rem;
}
.button {
text-align: center;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
.button a {
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
}
/* Second button */
.button-link {
text-align: center;
color: #fff;
display: block;
text-decoration: none;
padding: .2rem;
background-color: #888;
border-top: 0px solid #fff; /*define the color of the upper border */
border-bottom: 3px solid #666;
border-radius: 2px;
}
.button-link:hover {
box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
border-top-width: 2px; /* add this so it gets 'pushed down' */
border-bottom-width: 1px;
}
<div class="button">Click me</div><br/>
<a class="button-link" href="#">Click me, link only</a>
This one looks lovely, acording to me :)
.button {
color: rgba(255, 255, 255, 1);
background-color: rgba(61, 51, 119, 1);
font-weight: 500;
padding: 9px;
box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
width: 160px;
text-align: center;
transition: all .3s ease;
font-size: 15px;
border: none;
border-radius: 5px;
outline: none;
margin: auto;
font-family: "Century Gothic";
transform: scale(0.9);
}
.button:active {
box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
top: 6px;
transform: scale(0.9) translateY(3px);
}
<input class = 'button' type = 'button' value = 'Click' />