I can't seem to get the button to function properly, and it's really

I am having an issue with my "Let's Get Fit" button. When I hover over it or click it, the cursor doesn't change and it doesn't lead to index.html. I'm not sure why it's not working.

.btn {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-right: -2px;
}

.cta-btn {
  font-size: 1.2rem;
  background-color: #ca5558;
  padding: .9rem 1.8rem;
  color: #fff;
  border-radius: 3rem;
  transition: background-color .5s;
}

a.cta-btn:hover,
a.cta-btn:focus {
  color: black;
  background-color: #c94246;
}
<section class="hero" id="hero">
  <div class="container">
    <h2 class="sub-headline">
      <span class="first-letter">W</span>orkouts
    </h2>
    <div class="headline-description">

      <div class="single-animation">
        <h5>Made simpler.</h5>
        <a href="index.html" class="btn cta-btn">Let's Get Fit</a>
      </div>
    </div>
  </div>
</section>

htmlcssbutton

Answer №1

I'm not sure why it's not working, but when I tested it, everything seemed to be functioning properly. I only made one small change to your code by adding a <section> tag that was previously mentioned but not included.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        .btn{
            display: inline-block;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-right: -2px;
        }

        .cta-btn {
            font-size: 1.2rem;
            background-color: #ca5558;
            padding: .9rem 1.8rem;
            color: #fff;
            border-radius: 3rem;
            transition: background-color .5s;
        }
        
        a.cta-btn:hover,
        a.cta-btn:focus {
            color: black;
            background-color: #c94246 ;
        }
    </style>
</head>
<body>
    <section>
        <div class="container">
            <h2 class="sub-headline">
                <span class="first-letter">W</span>orkouts
            </h2>
            <div class="headline-description">

                <div class="single-animation">
                    <h5>Made simpler.</h5>
                    <a href="index.html" class="btn cta-btn">Let's Get Fit</a>
                </div>
            </div>
        </div>
    </section>

</body>
</html>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

varying perspectives in different browsers within my React application

I'm experiencing inconsistencies in the appearance of my website when viewed on Chrome mobile compared to Safari on an actual phone. Despite using prefixes for all my styles (WebKit, etc.) and incorporating normalize.css to address any issues, the dis ...

htmlcssreactjsresponsive-designcross-browser

Create a layout that includes options with checkboxes and divs styled inline

I'm in the process of setting up a voting poll on a website. The poll needs to be presented as a radio button followed by a <div> that contains all relevant poll details. In this <div>, I want the option text to appear on the left and the ...

htmlcsslayout

Using jQuery functions like closest(), find(), and children(), it is possible to target and retrieve the sibling of a specific parent

Having trouble determining the URL of a using .closest, .find and potentially other jQuery methods. The webpage structure is as follows: ul ul ul.good li ... li li <a href="/findme">findme</a> ul . ...

jqueryhtmlcssfindparent-child

Tips for wrapping a div around its floated children

I'm currently developing a website for an online shopping cart and working on making the search results responsive. I am aiming to display as many items as possible across the screen (usually 3) when viewed on any device with a resolution lower than t ...

javascripthtmlcsse-commerce

Placing a materialUI circular progress bar on top of the circular icon

I'm striving to add a circular progress bar that surrounds a circular icon with a visible space between the two elements, just as depicted in the image below. Although I successfully positioned the circular progress bar around the icon, creating adequ ...

cssreactjsmaterial-ui

Conceal navigation options on smaller screens and enable drop-down menu functionality with Bootstrap 3

With the usage of Bootstrap 3, I have successfully hidden two menu items when the screen is resized. However, these items still appear in the drop down menu that appears on the top left (with three bars) when the screen size is reduced. Is there a way to k ...

htmlcsstwitter-bootstrapasp.net-mvc-5

Render data from a RESTful Express API using AJAX and Node.js to display on a webpage

New to node.js development and facing a specific issue. My goal is to build a single-page web app using node.js where users can submit request data, retrieve information from the IMDb API, and display it on the same page. Here's my code: server.js # ...

ajaxnode.jsexpresshtml

What is the process for including CSS in the .ashx.cs code-behind file in ASP.NET?

How can I insert a css class in the .ashx file while the .aspx UI page displays it as a string? What is the method to include css in the code behind of the .ashx page? I would like the text "Cook" to be displayed in red. Problem: https://i.sstatic.net ...

cssasp.netashx

Keeping content in the middle of the page

When working with a div tag, I encountered a challenge. <div id="length"></div> My goal is to center the contents of the div while also decreasing its width to hold a number. #length{ background:black; color:white; border:3px solid gr ...

htmlcss

Interactive HTML5 canvas: Dragging and dropping multiple items

I'm currently working on a project that involves allowing users to drag and drop multiple objects within a specified area. To achieve this, I am utilizing the html5 canvas tag. While the functionality works smoothly when dragging and dropping a single ...

javascripthtmlcanvasdrag-and-drop

jQuery UI Datepicker Display Issue

I'm encountering an issue with a jQuery UI Datepicker object that is supposed to appear when I click inside a textbox. Below is the HTML code: <tr> <td class="label-td"><label for="dateOpen_add">Date Opened</label></td& ...

jqueryhtmlcssjquery-uiuidatepicker

Is `html.fa-events-icons-ready` causing clutter and disrupting the layout of the body?

I am seeking some clarification on my code and the resulting issues it is causing. Check out this image for reference: https://i.stack.imgur.com/jBQYd.png Why is the body height not taking up 100% of the space? The background image appears to be affect ...

htmlcsscss-selectorsfont-awesome

When I zoom in, a different div replaces the original div

I have recently delved into the world of HTML and CSS as I embarked on creating my own website. However, I seem to have hit a snag - when I zoom in on the content, it overlaps with the menu. I have scoured the internet for a solution to no avail, so any as ...

csshtmlzooming

CSS not working when attempting to override Angular (13) Material file

In my Angular (13) application with Material, I have developed a CSS file specifically for overriding certain Material styles. This CSS file is imported into the styles.scss file as the last line. However, despite importing the external file, the CSS def ...

cssangularangular-material

Show and hide HTML div elements dynamically using jQuery based on the selection from a dropdown

I am attempting to display or hide various divs based on user input from a select drop-down box. In fact, I initially tried to directly use the code from jQuery dropdown hide show div based on value, but I seem to be missing something simple that is preven ...

jqueryhtmlshow-hide

In HTML5, a full-width video exceeds the size of the screen

When I have a video set to full width in a header with the width at 100%, the issue arises with the height. The video is too large, causing the controls to be out of view unless I scroll. Is there a solution to remedy this problem? <video width="100%" ...

javascriptjqueryhtmlcsshtml5-video

What is the best way to make the buttons on my website shift downwards?

I'm currently working on making my website mobile-friendly. I've managed to stack the buttons on top of each other when the width reaches 700, but now I'm struggling to make them move down the screen. Some resources suggest using absolute po ...

jqueryhtmlcss

Is it possible for me to use @import to selectively choose what I need and disregard the rest?

If I am utilizing SASS and wish to incorporate a significant portion of another existing stylesheet, whether it is in SASS or CSS format, I have the option to import that particular sheet using @import, then employ @extend to apply some of its rules. Is ...

csssass

A Guide to Making a Floating Widget That Can Move Beyond the Boundaries of a Website in React

Currently, I am in the process of developing a project that requires the implementation of a floating widget capable of overlaying content not just within the confines of the website, but outside as well. This widget needs to have the ability to remain on ...

javascripthtmlreactjspipwidget

Switch between showing and hiding a div by clicking on an image

Currently, I am experimenting with the toggle div function and utilizing images as triggers for toggling. For instance, when a div is closed, an image of a "plus" sign indicates to the user that it can be expanded, and vice versa for compressing the div. T ...

javascripthtmljqueryjquery-uijquery-events