Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
I'm trying to create 2 buttons with different links and have the second button be a clickable image. For some reason the text in between the buttons acts as a hyperlink. How do I fix this?
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {
border-radius: 2px;
}
.button2 {
border-radius: 12px;
}
<body style="font-family: arial">
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<button class="button button1">Youtube</button>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<button class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90"></button>
</div>
You forgot to close the a tags. Try this:
Edit: changed the buttons to divs, see comment of user cloned.
body {
font-family: arial, sans-serif;
}
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<div class="button button1">Youtube</div>
</a>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<div class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90">
</div>
</a>
</div>
You have not closed the <a> tag.
This is the corrected code:
.button1 {
background-color: #E44040;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button2 {
border: none;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
}
.button1 {border-radius: 2px;}
.button2 {border-radius: 12px;}
<body style="font-family: arial">
<p>Click the button below For youtube</p>
<div>
<a href="https://www.youtube.com/" method="get" target="_blank">
<button class="button button1">Youtube</button>
</a>
</div>
<div>
<p>Click the button below fork Reddit</p>
<a href="https://www.reddit.com/" method="get" target="_blank">
<button class="button button2" style="border: 0; background: transparent">
<img src="https://toppng.com/uploads/preview/reddit-icon-reddit-logo-transparent-115628752708pqmsy4kgm.png" width="90" height="90">
</button>
</a>
</div>
</body>
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 months ago.
Improve this question
I've tried the codes for creating a glowing button on my webpage, but It's been done, below are some code which I tried.
.button {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button class=""> Hello World! </button
Please do help me to create this glowing button.
change <button class=""> Hello World! </button
to <button class="button"> Hello World! </button>
The css .button selector is looking for the class="button". The . denotes class. Read more here
If you want gradient glowing button you should use:
background-image: linear-gradient(firstcolor, secondcolor);
you could also add:
box-shadow: 1px 1px 10px yellow; (or any color that you want)
In your CSS you're targeting a class name of "button", but your button has no class name! Try assigning the button a class name and then use that name in the CSS, like so:
.myButton {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button class="myButton"> Hello World! </button
class value of the button is missing, also css must be in
<style> .button{...} </style>
.button {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button class="button"> Hello World! </button>
Use button instead of .button.
button {
background-color: #1c87c9;
-webkit-border-radius: 60px;
border-radius: 60px;
border: none;
color: #eeeeee;
cursor: pointer;
display: inline-block;
font-family: sans-serif;
font-size: 20px;
padding: 5px 15px;
text-align: center;
text-decoration: none;
}
<button>Hello World</button>
I'm working on a website that has been partially constructed.
I came across this code which displays a button without the href
<div class="practices__btn"><button>Learn More</button></div>
I've tried to fix it with the following code but find that it breaks the CSS.
<button class="practices__btn">Learn More</button>
Here is the CSS code.
.practices__card h2 {
text-align: center;
}
.practices__card p {
text-align: center;
margin-top: 24px;
font-size: 20px;
}
.practices__btn {
display: flex;
justify-content: center;
margin-top: 16px;
text-decoration: none;
}
.practices__card button {
color: #fff;
padding: 14px 24px;
border: none;
outline: none;
border-radius: 4px;
background: #131313;
font-size: 1rem;
}
This is the code that the button should fit into
<div class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<button class="practices__btn">Learn More</button>
</div>
I appreciate the help. I can't find the problem yet it seems simple.
I don't think using an anchor tag (<a>) on a button is the best practice. My advice is to make it a form instead, then add an action to it.
.practices__card h2 {
text-align: center;
}
.practices__card p {
text-align: center;
margin-top: 24px;
font-size: 20px;
}
.practices__btn {
display: flex;
justify-content: center;
margin-top: 16px;
text-decoration: none;
}
.practices__card button {
color: #fff;
padding: 14px 24px;
border: none;
outline: none;
border-radius: 4px;
background: #131313;
font-size: 1rem;
}
<div class="practices" id="practices">
<h1>Our Areas of Practice</h1>
<div class="practices__wrapper">
<div class="practices__card">
<h2>test</h2>
<p>
"For some reason"
</p>
<div class="practices__btn">
<form action="https://example.com">
<button type="submit" class="practices__btn">Learn More</button>
</form>
</div>
</div>
</div>
</div>
This question already has answers here:
Javascript onclick simulation using only css and html (without javascript)
(3 answers)
Closed last year.
I am currently working on a project using only HTML & CSS. I am wanting to make the menu button only display the dropdown items when it is clicked, and have an "x" button that will close them when it is clicked. I am able to make the menu dropdown on hover but am having no luck with it on click without JavaScript.
Does anyone know how I might be able to do this with just HTML & CSS? Here is the HTML & CSS that I have as of right now:
.header-menu {
background-color: #fff;
font-family: "Noto Sans", sans-serif;
font-size: 18px;
}
.header-menu-items {
display: none;
z-index: 1;
max-width: 100%;
overflow-wrap: break-word;
font-weight: 900;
}
.a {
color: #000;
padding: 10px;
text-decoration: none;
}
.search {
display: none;
}
.search-icon {
display: none;
}
.header-menu-items hr {
color: #d0d0d0;
background-color: #d0d0d0;
height: 1px;
border: none;
}
.header-menu-btn {
text-align: left;
background-color: #ff3b3b;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 10px 0;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
}
.header-menu:hover .header-menu-items {
display: block;
}
<div className="header-menu">
<button className="header-menu-btn">Menu</button>
<div className="header-menu-items">
<div>
<a className="a" href="">
Shirts
</a>
<hr />
<a className="a" href="">
Pants
</a>
<hr />
<a className="a" href="">
Shoes
</a>
<hr />
<a className="a" href="">
T-shirts
</a>
<hr />
<a className="a" href="">
Accessories
</a>
<hr />
</div>
</div>
</div>
Javascript onclick simulation using only css and html (without javascript)
I know your answer is in the answer to this post but I can't really figure out how to do it myself.
It would require changing your button to an input tag of checkbox type and going from there.
First of all it has to be class and not className.
What you want to do can be achieved with a checkbox and the sibling selector ~.
.header-menu {
background-color: #fff;
font-family: "Noto Sans", sans-serif;
font-size: 18px;
}
.header-menu-items {
display: none;
z-index: 1;
max-width: 100%;
overflow-wrap: break-word;
font-weight: 900;
}
.a {
color: #000;
padding: 10px;
text-decoration: none;
}
.search {
display: none;
}
.search-icon {
display: none;
}
.header-menu-items hr {
color: #d0d0d0;
background-color: #d0d0d0;
height: 1px;
border: none;
}
.header-menu-btn {
text-align: left;
background-color: #ff3b3b;
color: #fff;
font-size: 20px;
font-weight: 600;
padding: 10px 0;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
display: block;
}
#toggle-menu {
display: none;
}
#toggle-menu:checked ~ .header-menu-items {
display: block;
}
#toggle-menu ~ label .hide {
display: none;
}
#toggle-menu:checked ~ label .show {
display: none;
}
#toggle-menu:checked ~ label .hide {
display: inline;
}
<div class="header-menu">
<input type="checkbox" id="toggle-menu"><label for="toggle-menu" class="header-menu-btn">Menu <span class="show">show</span><span class="hide">hide<span></label>
<div class="header-menu-items">
<div>
<a class="a" href="">
Shirts
</a>
<hr />
<a class="a" href="">
Pants
</a>
<hr />
<a class="a" href="">
Shoes
</a>
<hr />
<a class="a" href="">
T-shirts
</a>
<hr />
<a class="a" href="">
Accessories
</a>
<hr />
</div>
</div>
</div>
I have a problem with one of sections in my HTML code.
My idea is simply: one section made by 1 row, who is divided on 2 columns.
In left column i tried to put countodwn timer, and "submit" button in right column. They have to be side by side, and on equal distance in regards to each other; but there are some problems - they are on unequal distance and i am wondering how to fix it...
Also, when i test how draft of my site looks on mobile, parts of the clock do not stay together - they just move under each other.
Here is a jsfiddle.
What i am doing wrong?
<div class="container-fluid">
<div class="row align-items-center"><div class="col-6 mx-auto">
<h3 style=" font-family: Open Sans; font-weight: light; font-size: 20px; color: 636363;letter-spacing: 1px; padding-left:110px;">Deadline:</h3>
<div id="clockdiv">
<div> <span class="days"></span>
<div class="smalltext">Days</div>
</div>
<div> <span class="hours"></span>
<div class="smalltext">Hours</div>
</div>
<div> <span class="minutes"></span>
<div class="smalltext">Minutes</div>
</div>
<div> <span class="seconds"></span>
<div class="smalltext">Seconds</div>
</div>
</div>
</div>
<div class="col-6 mx-auto">
<button class="button button1" style="width: 300px; height: 100px;">Submit</button>
</div>
</div>
</div>
And CSS:
#clockdiv{
font-family: Open Sans;
color: #ffffff;
display: inline-block;
font-weight: 100;
text-align: center;
font-size: 30px;
}
#clockdiv > div{
padding: 0px;
border-radius: 3px;
background: #fffff;
display: inline-block;
}
#clockdiv div > span{
padding: 15px;
border-radius: 3px;
background: #000;
display: inline-block;
position: relative;
}
.smalltext{
padding-top: 5px;
font-size: 16px;
color: #000;
position: relative;
}
.button {
background-color: #fff;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
font-family: 'Open Sans';
margin: 4px 2px;
-webkit-transition-duration: 0.4s;
transition-duration: 0.4s;
cursor: pointer;
}
.button1 {
background-color: white;
color: #000;
border: 2px solid #000;
}
.button1:hover {
background-color: #fff;
color: white;
I have a input field & button. However, there are two problems.
The text in the button is not centered.
The button is never the same height as the input.
To visualize it:
Ok, I also put together a super convenient fiddle to play with this.
How can I fix these problems? Make it look "perfectly aligned". I tried fiddling around with height settings, though was unsuccessful.
Code in that fiddle:
HTML:
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<input type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
</div>
</body>
CSS:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
try this css for your green button :
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
border-radius: 5px;
position: relative;
top: -2px;
}
use position: relative; top:1px; /* adjust this top to repositioning the button
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
}
button:hover{
background-color: darkgreen;
}
#username{
height: 40px;
padding:0px;
margin-right: 10px;
}
.input-fields{
display:inline-flex;
}
<body style="background-color: #5a6b7d">
<div style="text-align: center">
<h1 id='format' style="margin-top: 50px;">Welcome to our site</h1>
<p id='format' style="">this is a site</p>
<br>
<h2 id="format"><i class="fa fa-chevron-down" aria-hidden="true"></i> Type your username <i class="fa fa-chevron-down" aria-hidden="true"></i></h2>
<div class="input-fields">
<input id="username" type="text" placeholder="Type a username" style="font-size: 140%; text-align: center;" align="center">
<button id="playbutton">Play</button>
<div>
</div>
</body>
Just replace your button CSS with this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
text-align: center;
text-decoration: none;
font-size: 16px;
cursor: pointer;
border-radius: 3px;
line-height: 35px;
width: 80px;
}
How about this:
button[id=playbutton]{
background-color: #4CAF50;
border: none;
color: white;
font-size: 16px;
cursor: pointer;
border-radius: 5px;
height: 40px;
/* New */
padding: 0px;
width: 50px;
height: 20px;
}
The padding 0px will center the text inside the button and the width and height you can use to define the button size. This is an good option for centering if you dont know the exact size of a picture or other things.
Here is the JSFiddle:
https://jsfiddle.net/vLbbkcna/3/