Im trying to make the anchor tag as button and trying to add some css on it but it is not clickable
Here is my html code.
I'm following a youtube tutorial, I followed the video 100% but mine is not working, Im sorry im just new in web developing thankyou for the help.
<body>
<!-- Welcome Page -->
<section id="ulambg">
<div class="ulambg container">
<div>
<h1>Eatwell</h1>
<a href="#" type="button" class="btnulam">Ready to Eat</a>
<a href="#" type="button" class="btn btn-primary">Ready to Cook</a>
</div>
</div>
</section>
<!-- End Welcom Page -->
And this is the css I used in the program, is it because of the Java? I read some forum that says some java function wont work if you disabled your java on your machine.
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 15px;
font-family: 'Raleway', sans-serif ;
}
a {
text-decoration: none;
}
.container {
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/*Welcome Page Section Ulambg*/
#ulambg {
background-image: url(./img/bg.jpg);
background-size: cover;
background-position: top center;
position: relative;
}
#ulambg::after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
background-color: black;
opacity: .5;
}
#ulambg h1 {
color: white;
width: fit-content;
font-size: 4rem;
position: relative;
}
#ulambg .btnulam {
display: inline-block;
padding: 10px 30px;
color: blue;
background-color: transparent;
border: 2px solid blue;
font-size: 2rem;
text-transform: uppercase;
letter-spacing: .1rem;
margin-top: 30px;
transition: .3s ease;
transition-property: background-color;
}
#ulambg .btnulam:hover {
color: white;
background-color: blue;
}
/*Welcome Page Sectio Ulambg*/
My Answer:
It sounds like there may be an issue with your CSS or HTML code. Here is an example of how you can create an anchor tag that looks like a button and is clickable:
HTML:
html
Click me
CSS (styles.css):
css
.button {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
text-decoration: none;
border-radius: 5px;
}
.button:hover {
background-color: #0056b3;
}
Make sure that your CSS file is linked correctly in your HTML file and that the CSS code is correct. Also, ensure that there are no other styles overriding the styles you have applied to the anchor tag.
If you are still having trouble, please provide more details or code snippets so that I can better assist you.
Rate this post
4 of 5 based on 9910 votesComments