What I want is to apply the link rules to this button, like of a:link, a:hover, etc but I do not want to use a tag as it will change all of my links on the page. Can anyone help me please?
Here is my HTML:
<html>
<head>
<title>Button</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<button>Button</button>
</body>
</html>
and here is my CSS
button {
color: #003739;
background-color: #00bb89;
padding: 6px 18px;
border-radius: 100px;
border: 2px solid #007e5c;
background: linear-gradient(#00dda1, #00956d);
box-shadow: inset 0 0 2px white;
text-shadow: 0px 1px 1px white;
box-shadow: 0px 2px 5px #d0d0d0;
cursor: pointer;
}
For starters, it isn't valid for an a element to be contained within a button element.
What you can do is instead give your a element a button role attribute and style on that:
a[role="button"]:link {
...
}
a[role="button"]:hover {
...
}
...
Related
The style of y "Tweet" button disappears whem i adding !DOCTYPE html.
Tweet with style
Style gone
Css part
<!DOCTYPE html>
<html>
<head>
<title>Buttons</title>
<link rel="stylesheet" href="styles/buttons.css">
</head>
<body>
<button class="buttonYT">SUBSCRIBE</button>
<button class="JOIN">JOIN</button>
<button class="Tweetb">Tweet</button>
</body>
</html>
css part of Tweet button from button.css
.tweetb {
background-color: rgb(29, 155, 240);
color: white;
border: none;
height: 36px;
width: 74px;
border-radius: 20px;
font-weight: bold;
font-size: 15px;
cursor: pointer;
margin-left: 8px;
transition: box-shadow 0.15s;
vertical-align: top;
}
.tweetb:hover {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15);
}
From your screenshot, the class name for the tweet button is TweetBT, whereas in your button.css it's .tweetBT, which should be .TweetBT.
As the class name is not matching, the CSS is not applied. It's not an issue with !DOCType Html.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(dis.style.display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
When the top left button is pressed, the alert popup box prints nothing indicating that navbar has no display. But navbar is a div element with display = block explicitly set in the CSS code.
You're not returning a value because the style attribute does not contain any value in this instance. If for example we move the display: block to the element as a style attribute like style="display: block" then it would return the value as you expect. See example provided, but the behavior is expected.
Hope this helps, cheers!
PS - a div is a block element by default, no need to define it in the css unless you're overriding the default for whatever reason.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0];
console.log(dis);
alert(dis.style.display);
}
</script>
</head>
<body>
<div class="navbar" style="display: block">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
Looks like you want to get the CSS computedStyle. You can use getComputedStyle to return an object containing the values of all CSS properties of said element.
getComputedStyle(dis, "display").display
Will return the display rule set in your elements css. As Chris W explained in the prior answer if you use el.style.display, it is looking for the inline style rule for display.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {
color: white;
background-color: #1E1B1B;
border-color: grey;
}
.navbar {
height: 50px;
border-bottom: 2px solid grey;
margin-bottom: 10px;
display: block;
}
button.nav-btn {
float:right;
background-color: transparent;
border: 1px solid grey;
color: white;
padding: 5px 12px;
font-size: 30px;
cursor: pointer;
float: left;
}
</style>
<script>
function toggleToolNav() {
var dis = document.getElementsByClassName("navbar")[0]
alert(getComputedStyle(dis, "display").display)
}
</script>
</head>
<body>
<div class="navbar">
<button class="drop-down-toggle" onclick="toggleToolNav()"><i class="fa fa-bars"></i></button>
</div>
</body>
</html>
I have the following very basic HTML code:
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
* {
outline: none;
}
a {
padding: 6px 20px;
border: 1px solid #bdbdbd;
border-radius: 6px;
text-decoration: none;
font-size: 100px;
}
a:active {
box-shadow: 0px 0px 4px 0px #b9b9b9;
-webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}
</style>
<title>IPhone - Button</title>
</head>
<body>
Long Press This
</body>
</html>
and when I open it on a real IPhone device I get the following:
but when I long press the button I get the following:
with that very annoying gray-highlighted background.
I get that annoying effect only on IPhone. I tried the same on the rest of browsers (Android, Windows, MacOS) without getting that effect.
Any idea on how to get rid of that?
Here you have an inline demo of the code:
* {
outline: none;
}
a {
padding: 6px 20px;
border: 1px solid #bdbdbd;
border-radius: 6px;
text-decoration: none;
font-size: 40px;
}
a:active {
box-shadow: 0px 0px 4px 0px #b9b9b9;
-webkit-box-shadow: 0px 0px 4px 0px #b9b9b9;
}
Long Press This
Please, notice that I need that box-shadow above at the same time I get rid of the gray highlight. In other words, I need the same effect I get on the rest of browsers.
Here it is also on JSFiddle.net:
http://jsfiddle.net/05kqt7m3/
http://jsfiddle.net/05kqt7m3/embedded/result/
Thanks!
Have you tried:
<style type="text/css">
* {
-webkit-touch-callout: none;
-webkit-user-select: none; /* Disable selection/copy in UIWebView */
}
</style>
As shown in Disabling user selection in UIWebView
My css class is not applying the style yet I have imported the css file. What might be the issue?
Here is the code:
.edubtn{
background-color: #862165;
border: 0;
padding: 2 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
<div class="edubtn" onclick="show()" >ORDER</div>
The only thing wrong with your css is you need to fix the padding attribute:
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
Rememeber if there is an error above this class, the css parser will skip the current block until the next working block.
Hey found the problem: I had put my css inside another (#media screen) brackets
#media screen and (max-width: 500px){
.attachchild{
width: 90%;
margin-top: 20px;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 2px 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
your code works fine,
the background color is dark purple which is = to saying background-color: #862165;
the text color is white which is = to saying color: rgba(255,255,255,0.7);
I run your code and I did a <h2> with the same style and it works
HTML Code :
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Beep-Boop</title>
</head>
<body>
<h2 class="something"> Something..</h2>
<div class="edubtn" onclick="show()" >ORDER</div>
</body>
Style CSS :
.something{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.something:hover{
color: #fff;
}
.edubtn{
background-color: #862165;
border: 0;
padding: 10px;
color: rgba(255,255,255,0.7);
}
.edubtn:hover{
color: #fff;
}
I can't set this CSS class, the color instruction doesn't work, but the text-shadow does. Help me?
.jumbotron {
position: relative;
padding: 40px 0;
color: #6495ed;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}
I tried to delete the text-shadow, but it also didn't work.
Use !important to override other color styling.
like: color: #6495ed !important
I think the closing brace is missing. Put all the setting in .jumbotron class and give it a try. Good Luck.
I did a test about your CSS code like this:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Untitled</title>
<meta name="author" content="" />
<style>
.jumbotron {
position: relative;
padding: 40px 0;
color: red;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}
</style>
</head>
<body>
<p class="jumbotron">This is a test</p>
</body>
</html>
It seems to be working well
If the background color changes but the text does not then one possible cause could be the anchor. By default when you place a text in anchor it automatically becomes underlined because it is a link and underlined when it is visited once. So if anyone else having this problem try overriding that in css by
a:hover, a:active, a:link, a:visited {
text-decoration:none;
color : #000; /* for example */
}
or simply repeat the css item and add "a" in front of the class:
myClass, myClass a {
}
<!doctype html>
<head>
<html>
<style>
.jumbotron {
position: relative;
padding: 40px 0;
color: #6495ed !important;
text-align: center;
text-shadow: 0 0px 0px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}
</style>
</head>
<body>
<p class="jumbotron">hello world</p>
</body>
</html>
Another possibility might be accidentally using HTML comment tags instead of CSS comment tags or added some unrecognizable characters right before the color: #6495ed; causing user agent to ignore the color: #6495ed; declaration
<!doctype html>
<html>
<head>
<style>
.jumbotron {
position: relative;
padding: 40px 0; <!--some comments -->
color: #6495ed;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}
</style>
</head>
<body>
<p class="jumbotron">Testing...</p>
</body>
</html>
The user agent will instead treat it as
<!doctype html>
<html>
<head>
<style>
.jumbotron {
position: relative;
padding: 40px 0;
text-align: center;
text-shadow: 0 1px 3px rgba(0,0,0,.4), 0 0 30px rgba(0,0,0,.075);
}
</style>
</head>
<body>
<p class="jumbotron">Testing...</p>
</body>
</html>