Why this CSS button is not 'clickable'? [duplicate]
-2
This question already has an answer here:
How to create an HTML button that acts like a link?
29 answers
So I created a button in html and then styled it in css, but it's not working, I can't click on it.
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}<button class="blue" href="www.google.com">Get The App</button>I tried many different combinations, sometimes button just get default html look, sometimes nothing happend. Can someone point me how to create my own custom button?
I would appreciate any help.
html css frontend
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
asked Nov 21 '18 at 12:35
adiush
65
marked as duplicate by Ismail Farooq, Pete, chŝdk, JJJ, Nguyễn Thanh Tú Nov 21 '18 at 13:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
|
show 2 more comments
-2
This question already has an answer here:
How to create an HTML button that acts like a link?
29 answers
So I created a button in html and then styled it in css, but it's not working, I can't click on it.
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}<button class="blue" href="www.google.com">Get The App</button>I tried many different combinations, sometimes button just get default html look, sometimes nothing happend. Can someone point me how to create my own custom button?
I would appreciate any help.
html css frontend
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
asked Nov 21 '18 at 12:35
adiush
65
marked as duplicate by Ismail Farooq, Pete, chŝdk, JJJ, Nguyễn Thanh Tú Nov 21 '18 at 13:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
refer to this answer stackoverflow.com/questions/2906582/…
– DaFois
Nov 21 '18 at 12:38
1
and the click should do what? a button alone will do nothing
– Temani Afif
Nov 21 '18 at 12:41
Seems to click fine for me - please can you clarify what you expect it to do when you click it
– Pete
Nov 21 '18 at 12:43
@Pete I expect that it got 'effect of click', this little push when clicked or at least hand cursor when hovered
– adiush
Nov 21 '18 at 13:19
I think i got it. I added darker color on :hover and cursor: pointer. Now it looks like a button. Thanks for all answers guys
– adiush
Nov 21 '18 at 13:21
|
show 2 more comments
-2
-2
-2
This question already has an answer here:
How to create an HTML button that acts like a link?
29 answers
So I created a button in html and then styled it in css, but it's not working, I can't click on it.
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}<button class="blue" href="www.google.com">Get The App</button>I tried many different combinations, sometimes button just get default html look, sometimes nothing happend. Can someone point me how to create my own custom button?
I would appreciate any help.
html css frontend
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
asked Nov 21 '18 at 12:35
adiush
65
This question already has an answer here:
How to create an HTML button that acts like a link?
29 answers
So I created a button in html and then styled it in css, but it's not working, I can't click on it.
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}<button class="blue" href="www.google.com">Get The App</button>I tried many different combinations, sometimes button just get default html look, sometimes nothing happend. Can someone point me how to create my own custom button?
I would appreciate any help.
This question already has an answer here:
How to create an HTML button that acts like a link?
29 answers
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}<button class="blue" href="www.google.com">Get The App</button>button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}<button class="blue" href="www.google.com">Get The App</button>html css frontend
html css frontend
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
asked Nov 21 '18 at 12:35
adiush
65
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
asked Nov 21 '18 at 12:35
adiush
65
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
edited Nov 21 '18 at 13:00
Ashfaque Marfani
5712
5712
asked Nov 21 '18 at 12:35
adiush
65
asked Nov 21 '18 at 12:35
adiush
65
asked Nov 21 '18 at 12:35
adiush
65
65
marked as duplicate by Ismail Farooq, Pete, chŝdk, JJJ, Nguyễn Thanh Tú Nov 21 '18 at 13:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
marked as duplicate by Ismail Farooq, Pete, chŝdk, JJJ, Nguyễn Thanh Tú Nov 21 '18 at 13:55
This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.
refer to this answer stackoverflow.com/questions/2906582/…
– DaFois
Nov 21 '18 at 12:38
1
and the click should do what? a button alone will do nothing
– Temani Afif
Nov 21 '18 at 12:41
Seems to click fine for me - please can you clarify what you expect it to do when you click it
– Pete
Nov 21 '18 at 12:43
@Pete I expect that it got 'effect of click', this little push when clicked or at least hand cursor when hovered
– adiush
Nov 21 '18 at 13:19
I think i got it. I added darker color on :hover and cursor: pointer. Now it looks like a button. Thanks for all answers guys
– adiush
Nov 21 '18 at 13:21
|
show 2 more comments
refer to this answer stackoverflow.com/questions/2906582/…
– DaFois
Nov 21 '18 at 12:38
1
and the click should do what? a button alone will do nothing
– Temani Afif
Nov 21 '18 at 12:41
Seems to click fine for me - please can you clarify what you expect it to do when you click it
– Pete
Nov 21 '18 at 12:43
@Pete I expect that it got 'effect of click', this little push when clicked or at least hand cursor when hovered
– adiush
Nov 21 '18 at 13:19
I think i got it. I added darker color on :hover and cursor: pointer. Now it looks like a button. Thanks for all answers guys
– adiush
Nov 21 '18 at 13:21
refer to this answer stackoverflow.com/questions/2906582/…
– DaFois
Nov 21 '18 at 12:38
refer to this answer stackoverflow.com/questions/2906582/…
– DaFois
Nov 21 '18 at 12:38
1
1
and the click should do what? a button alone will do nothing
– Temani Afif
Nov 21 '18 at 12:41
and the click should do what? a button alone will do nothing
– Temani Afif
Nov 21 '18 at 12:41
Seems to click fine for me - please can you clarify what you expect it to do when you click it
– Pete
Nov 21 '18 at 12:43
Seems to click fine for me - please can you clarify what you expect it to do when you click it
– Pete
Nov 21 '18 at 12:43
@Pete I expect that it got 'effect of click', this little push when clicked or at least hand cursor when hovered
– adiush
Nov 21 '18 at 13:19
@Pete I expect that it got 'effect of click', this little push when clicked or at least hand cursor when hovered
– adiush
Nov 21 '18 at 13:19
I think i got it. I added darker color on :hover and cursor: pointer. Now it looks like a button. Thanks for all answers guys
– adiush
Nov 21 '18 at 13:21
I think i got it. I added darker color on :hover and cursor: pointer. Now it looks like a button. Thanks for all answers guys
– adiush
Nov 21 '18 at 13:21
|
show 2 more comments
5 Answers
5
active
oldest
votes
2
A button element can't use a href attribute. Use an A (anchor) element instead and style it to look like a button as you've just done.
Use the :hover :active pasuados to change the style when a user hovers or clicks the button.
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
border: 1px transparent solid; /* transparent border */
color: black;
padding: 13px 30px; /* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>Now simply replace some of my code above with whatever styles you want.
UPDATE:
If you need a button with a fixed height check this code:
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
/* add a transparent border or use #00FFF0 for color */
border: 1px transparent solid;
/* Allows us to include the padding and border in an element's total width and height. */
box-sizing: border-box;
color: black;
/* remove the top and bottom padding, we don't need them */
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-family: Helvetica, Arial;
/* Use this to set a fixed height so the height won't changes */
height: 35px;
/* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
line-height: 35px;
/* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
min-width: 150px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
font-size: 14px;
font-weight: bold;
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>answered Nov 21 '18 at 12:43
Studio KonKon
406210
I would normally advise against using anonclickevent on abuttonand use theAtag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled.
– Studio KonKon
Nov 21 '18 at 13:08
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript.
– JJJ
Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)...
– adiush
Nov 21 '18 at 13:09
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding topadding: 13px 30px;other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works.
– Studio KonKon
Nov 21 '18 at 13:41
add a comment |
0
Button don't have a href attribute. you can use
<a href="#" > Click Me </a>
Element.(if you reference any page or link)
Or You can use
<button onClick="anyFunction"> Cick me </button>
button with event handler which expect a function.
answered Nov 21 '18 at 12:44
imran
165
add a comment |
0
Use this and use css so that it looks like button, because button don't have a href attribute.
<a href="#" class="blue">Get The App</a>
answered Nov 21 '18 at 12:48
Divya Agrawal
12
add a comment |
0
You should not use href in button element. You can use onclick like this.
<html lang="en">
<head>
<style type="text/css">
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}
</style>
</head>
<body>
<button class="blue" onclick="alert('working')">Get The App</button>
</body>
</html>
You can find all html element tutorial in here
answered Nov 21 '18 at 12:51
Isa Ataseven
263
add a comment |
-1
border: none; makes the problem
please try to give color to the border
eg.
<button class="blue">Get The App</button>
<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6; }
</style>answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
Are you seriously saying that the difference between a clickable and non-clickable button is its border color?
– JJJ
Nov 21 '18 at 13:01
No i mean the button feels not clickable because border:none;
– Mahesh Shenoi
Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look
– adiush
Nov 21 '18 at 13:05
I'm pretty sure the question is about the button not working as a link, not how it "feels".
– JJJ
Nov 21 '18 at 13:08
add a comment |
5 Answers
5
active
oldest
votes
5 Answers
5
active
oldest
votes
active
oldest
votes
active
oldest
votes
2
A button element can't use a href attribute. Use an A (anchor) element instead and style it to look like a button as you've just done.
Use the :hover :active pasuados to change the style when a user hovers or clicks the button.
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
border: 1px transparent solid; /* transparent border */
color: black;
padding: 13px 30px; /* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>Now simply replace some of my code above with whatever styles you want.
UPDATE:
If you need a button with a fixed height check this code:
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
/* add a transparent border or use #00FFF0 for color */
border: 1px transparent solid;
/* Allows us to include the padding and border in an element's total width and height. */
box-sizing: border-box;
color: black;
/* remove the top and bottom padding, we don't need them */
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-family: Helvetica, Arial;
/* Use this to set a fixed height so the height won't changes */
height: 35px;
/* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
line-height: 35px;
/* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
min-width: 150px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
font-size: 14px;
font-weight: bold;
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>answered Nov 21 '18 at 12:43
Studio KonKon
406210
I would normally advise against using anonclickevent on abuttonand use theAtag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled.
– Studio KonKon
Nov 21 '18 at 13:08
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript.
– JJJ
Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)...
– adiush
Nov 21 '18 at 13:09
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding topadding: 13px 30px;other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works.
– Studio KonKon
Nov 21 '18 at 13:41
add a comment |
2
A button element can't use a href attribute. Use an A (anchor) element instead and style it to look like a button as you've just done.
Use the :hover :active pasuados to change the style when a user hovers or clicks the button.
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
border: 1px transparent solid; /* transparent border */
color: black;
padding: 13px 30px; /* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>Now simply replace some of my code above with whatever styles you want.
UPDATE:
If you need a button with a fixed height check this code:
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
/* add a transparent border or use #00FFF0 for color */
border: 1px transparent solid;
/* Allows us to include the padding and border in an element's total width and height. */
box-sizing: border-box;
color: black;
/* remove the top and bottom padding, we don't need them */
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-family: Helvetica, Arial;
/* Use this to set a fixed height so the height won't changes */
height: 35px;
/* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
line-height: 35px;
/* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
min-width: 150px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
font-size: 14px;
font-weight: bold;
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>answered Nov 21 '18 at 12:43
Studio KonKon
406210
I would normally advise against using anonclickevent on abuttonand use theAtag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled.
– Studio KonKon
Nov 21 '18 at 13:08
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript.
– JJJ
Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)...
– adiush
Nov 21 '18 at 13:09
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding topadding: 13px 30px;other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works.
– Studio KonKon
Nov 21 '18 at 13:41
add a comment |
2
2
2
A button element can't use a href attribute. Use an A (anchor) element instead and style it to look like a button as you've just done.
Use the :hover :active pasuados to change the style when a user hovers or clicks the button.
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
border: 1px transparent solid; /* transparent border */
color: black;
padding: 13px 30px; /* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>Now simply replace some of my code above with whatever styles you want.
UPDATE:
If you need a button with a fixed height check this code:
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
/* add a transparent border or use #00FFF0 for color */
border: 1px transparent solid;
/* Allows us to include the padding and border in an element's total width and height. */
box-sizing: border-box;
color: black;
/* remove the top and bottom padding, we don't need them */
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-family: Helvetica, Arial;
/* Use this to set a fixed height so the height won't changes */
height: 35px;
/* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
line-height: 35px;
/* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
min-width: 150px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
font-size: 14px;
font-weight: bold;
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>answered Nov 21 '18 at 12:43
Studio KonKon
406210
A button element can't use a href attribute. Use an A (anchor) element instead and style it to look like a button as you've just done.
Use the :hover :active pasuados to change the style when a user hovers or clicks the button.
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
border: 1px transparent solid; /* transparent border */
color: black;
padding: 13px 30px; /* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>Now simply replace some of my code above with whatever styles you want.
UPDATE:
If you need a button with a fixed height check this code:
.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
/* add a transparent border or use #00FFF0 for color */
border: 1px transparent solid;
/* Allows us to include the padding and border in an element's total width and height. */
box-sizing: border-box;
color: black;
/* remove the top and bottom padding, we don't need them */
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-family: Helvetica, Arial;
/* Use this to set a fixed height so the height won't changes */
height: 35px;
/* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
line-height: 35px;
/* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
min-width: 150px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
font-size: 14px;
font-weight: bold;
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
border: 1px transparent solid; /* transparent border */
color: black;
padding: 13px 30px; /* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
border: 1px transparent solid; /* transparent border */
color: black;
padding: 13px 30px; /* remove 2px as we are now using the border */
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
/* add a transparent border or use #00FFF0 for color */
border: 1px transparent solid;
/* Allows us to include the padding and border in an element's total width and height. */
box-sizing: border-box;
color: black;
/* remove the top and bottom padding, we don't need them */
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-family: Helvetica, Arial;
/* Use this to set a fixed height so the height won't changes */
height: 35px;
/* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
line-height: 35px;
/* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
min-width: 150px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
font-size: 14px;
font-weight: bold;
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>.btn-blue {
background-color: #00FFF0;
border-radius: 12px;
/* add a transparent border or use #00FFF0 for color */
border: 1px transparent solid;
/* Allows us to include the padding and border in an element's total width and height. */
box-sizing: border-box;
color: black;
/* remove the top and bottom padding, we don't need them */
padding: 0px 30px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
font-family: Helvetica, Arial;
/* Use this to set a fixed height so the height won't changes */
height: 35px;
/* Set to same as height so the text is centred in the middle. You can change the font-size or family without the box getting bigger */
line-height: 35px;
/* So that the box doesn't shrink or expand if the font-size changes on hover like in this example. */
min-width: 150px;
opacity: 0.6;
cursor: pointer;
}
.btn-blue:hover
{
font-size: 14px;
font-weight: bold;
opacity: 1;
background-color: #00EEE0;
border: 1px #99ccff solid;
}
.btn-blue:active
{
background-color: #00CCC0;
border: 1px #000000 solid;
}<a class="btn-blue" href="#">Get The App</a>answered Nov 21 '18 at 12:43
Studio KonKon
406210
edited Nov 21 '18 at 14:08
answered Nov 21 '18 at 12:43
Studio KonKon
406210
answered Nov 21 '18 at 12:43
Studio KonKon
406210
answered Nov 21 '18 at 12:43
Studio KonKon
406210
406210
I would normally advise against using anonclickevent on abuttonand use theAtag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled.
– Studio KonKon
Nov 21 '18 at 13:08
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript.
– JJJ
Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)...
– adiush
Nov 21 '18 at 13:09
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding topadding: 13px 30px;other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works.
– Studio KonKon
Nov 21 '18 at 13:41
add a comment |
I would normally advise against using anonclickevent on abuttonand use theAtag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled.
– Studio KonKon
Nov 21 '18 at 13:08
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript.
– JJJ
Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)...
– adiush
Nov 21 '18 at 13:09
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding topadding: 13px 30px;other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works.
– Studio KonKon
Nov 21 '18 at 13:41
I would normally advise against using an
onclick event on a button and use the A tag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled.– Studio KonKon
Nov 21 '18 at 13:08
I would normally advise against using an
onclick event on a button and use the A tag instead. While it is 2018 and almost every browser has it, some people have JavaScript disabled either for privacy, security, their organisation doesn't allow it or whatever reason and all you are using it for is a link. Using JavaScript would mean the link won't work if it's disabled.– Studio KonKon
Nov 21 '18 at 13:08
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript.
– JJJ
Nov 21 '18 at 13:09
...and you lose basic link functionality like ctrl-click to open in new tab, or right-click and copy URL, which people use all the time with or without JavaScript.
– JJJ
Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)...
– adiush
Nov 21 '18 at 13:09
that's some way, but strange thing happen when I do it - my button is getting removed to border bottom of navbar (it should be centered right, but its getting moved down to bottom border of nav)...
– adiush
Nov 21 '18 at 13:09
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding to
padding: 13px 30px; other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works.– Studio KonKon
Nov 21 '18 at 13:41
Probably because I added the border in this code which adds an extra 2px (1px for top and bottom, left and right) so change the padding to
padding: 13px 30px; other than that we will need to know what navbar you are using, like is it bootstrap? or something custom with a fixed height withh css? see if changing the padding works.– Studio KonKon
Nov 21 '18 at 13:41
add a comment |
0
Button don't have a href attribute. you can use
<a href="#" > Click Me </a>
Element.(if you reference any page or link)
Or You can use
<button onClick="anyFunction"> Cick me </button>
button with event handler which expect a function.
answered Nov 21 '18 at 12:44
imran
165
add a comment |
0
Button don't have a href attribute. you can use
<a href="#" > Click Me </a>
Element.(if you reference any page or link)
Or You can use
<button onClick="anyFunction"> Cick me </button>
button with event handler which expect a function.
answered Nov 21 '18 at 12:44
imran
165
add a comment |
0
0
0
Button don't have a href attribute. you can use
<a href="#" > Click Me </a>
Element.(if you reference any page or link)
Or You can use
<button onClick="anyFunction"> Cick me </button>
button with event handler which expect a function.
answered Nov 21 '18 at 12:44
imran
165
Button don't have a href attribute. you can use
<a href="#" > Click Me </a>
Element.(if you reference any page or link)
Or You can use
<button onClick="anyFunction"> Cick me </button>
button with event handler which expect a function.
answered Nov 21 '18 at 12:44
imran
165
edited Nov 21 '18 at 12:50
answered Nov 21 '18 at 12:44
imran
165
answered Nov 21 '18 at 12:44
imran
165
answered Nov 21 '18 at 12:44
imran
165
165
add a comment |
add a comment |
0
Use this and use css so that it looks like button, because button don't have a href attribute.
<a href="#" class="blue">Get The App</a>
answered Nov 21 '18 at 12:48
Divya Agrawal
12
add a comment |
0
Use this and use css so that it looks like button, because button don't have a href attribute.
<a href="#" class="blue">Get The App</a>
answered Nov 21 '18 at 12:48
Divya Agrawal
12
add a comment |
0
0
0
Use this and use css so that it looks like button, because button don't have a href attribute.
<a href="#" class="blue">Get The App</a>
answered Nov 21 '18 at 12:48
Divya Agrawal
12
Use this and use css so that it looks like button, because button don't have a href attribute.
<a href="#" class="blue">Get The App</a>
answered Nov 21 '18 at 12:48
Divya Agrawal
12
edited Nov 21 '18 at 12:50
answered Nov 21 '18 at 12:48
Divya Agrawal
12
answered Nov 21 '18 at 12:48
Divya Agrawal
12
answered Nov 21 '18 at 12:48
Divya Agrawal
12
12
add a comment |
add a comment |
0
You should not use href in button element. You can use onclick like this.
<html lang="en">
<head>
<style type="text/css">
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}
</style>
</head>
<body>
<button class="blue" onclick="alert('working')">Get The App</button>
</body>
</html>
You can find all html element tutorial in here
answered Nov 21 '18 at 12:51
Isa Ataseven
263
add a comment |
0
You should not use href in button element. You can use onclick like this.
<html lang="en">
<head>
<style type="text/css">
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}
</style>
</head>
<body>
<button class="blue" onclick="alert('working')">Get The App</button>
</body>
</html>
You can find all html element tutorial in here
answered Nov 21 '18 at 12:51
Isa Ataseven
263
add a comment |
0
0
0
You should not use href in button element. You can use onclick like this.
<html lang="en">
<head>
<style type="text/css">
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}
</style>
</head>
<body>
<button class="blue" onclick="alert('working')">Get The App</button>
</body>
</html>
You can find all html element tutorial in here
answered Nov 21 '18 at 12:51
Isa Ataseven
263
You should not use href in button element. You can use onclick like this.
<html lang="en">
<head>
<style type="text/css">
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border: none;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6;
}
</style>
</head>
<body>
<button class="blue" onclick="alert('working')">Get The App</button>
</body>
</html>
You can find all html element tutorial in here
answered Nov 21 '18 at 12:51
Isa Ataseven
263
answered Nov 21 '18 at 12:51
Isa Ataseven
263
answered Nov 21 '18 at 12:51
Isa Ataseven
263
answered Nov 21 '18 at 12:51
Isa Ataseven
263
263
add a comment |
add a comment |
-1
border: none; makes the problem
please try to give color to the border
eg.
<button class="blue">Get The App</button>
<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6; }
</style>answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
Are you seriously saying that the difference between a clickable and non-clickable button is its border color?
– JJJ
Nov 21 '18 at 13:01
No i mean the button feels not clickable because border:none;
– Mahesh Shenoi
Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look
– adiush
Nov 21 '18 at 13:05
I'm pretty sure the question is about the button not working as a link, not how it "feels".
– JJJ
Nov 21 '18 at 13:08
add a comment |
-1
border: none; makes the problem
please try to give color to the border
eg.
<button class="blue">Get The App</button>
<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6; }
</style>answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
Are you seriously saying that the difference between a clickable and non-clickable button is its border color?
– JJJ
Nov 21 '18 at 13:01
No i mean the button feels not clickable because border:none;
– Mahesh Shenoi
Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look
– adiush
Nov 21 '18 at 13:05
I'm pretty sure the question is about the button not working as a link, not how it "feels".
– JJJ
Nov 21 '18 at 13:08
add a comment |
-1
-1
-1
border: none; makes the problem
please try to give color to the border
eg.
<button class="blue">Get The App</button>
<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6; }
</style>answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
border: none; makes the problem
please try to give color to the border
eg.
<button class="blue">Get The App</button>
<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6; }
</style><button class="blue">Get The App</button>
<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6; }
</style><button class="blue">Get The App</button>
<style>
button.blue {
background-color: #00FFF0;
border-radius: 12px;
border-color: #00FFF0;
color: black;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 12px;
opacity: 0.6; }
</style>answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
answered Nov 21 '18 at 12:50
Mahesh Shenoi
11
11
Are you seriously saying that the difference between a clickable and non-clickable button is its border color?
– JJJ
Nov 21 '18 at 13:01
No i mean the button feels not clickable because border:none;
– Mahesh Shenoi
Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look
– adiush
Nov 21 '18 at 13:05
I'm pretty sure the question is about the button not working as a link, not how it "feels".
– JJJ
Nov 21 '18 at 13:08
add a comment |
Are you seriously saying that the difference between a clickable and non-clickable button is its border color?
– JJJ
Nov 21 '18 at 13:01
No i mean the button feels not clickable because border:none;
– Mahesh Shenoi
Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look
– adiush
Nov 21 '18 at 13:05
I'm pretty sure the question is about the button not working as a link, not how it "feels".
– JJJ
Nov 21 '18 at 13:08
Are you seriously saying that the difference between a clickable and non-clickable button is its border color?
– JJJ
Nov 21 '18 at 13:01
Are you seriously saying that the difference between a clickable and non-clickable button is its border color?
– JJJ
Nov 21 '18 at 13:01
No i mean the button feels not clickable because border:none;
– Mahesh Shenoi
Nov 21 '18 at 13:05
No i mean the button feels not clickable because border:none;
– Mahesh Shenoi
Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look
– adiush
Nov 21 '18 at 13:05
nice try, but when i remove it, it changes its look
– adiush
Nov 21 '18 at 13:05
I'm pretty sure the question is about the button not working as a link, not how it "feels".
– JJJ
Nov 21 '18 at 13:08
I'm pretty sure the question is about the button not working as a link, not how it "feels".
– JJJ
Nov 21 '18 at 13:08
add a comment |
refer to this answer stackoverflow.com/questions/2906582/…
– DaFois
Nov 21 '18 at 12:38
1
and the click should do what? a button alone will do nothing
– Temani Afif
Nov 21 '18 at 12:41
Seems to click fine for me - please can you clarify what you expect it to do when you click it
– Pete
Nov 21 '18 at 12:43
@Pete I expect that it got 'effect of click', this little push when clicked or at least hand cursor when hovered
– adiush
Nov 21 '18 at 13:19
I think i got it. I added darker color on :hover and cursor: pointer. Now it looks like a button. Thanks for all answers guys
– adiush
Nov 21 '18 at 13:21