Enhancing the design of a button with whitespace using CSS

Recently, I had a well-designed landing page created using LeadPages. However, due to financial constraints, I am unable to continue paying for their services at the moment. The current landing page has proven to be effective in converting leads.

https://www.anxietysupportnetwork.com/purpose-fairy-landing

Nevertheless, I have decided to create my own version of the landing page, which is inspired by the original but not an exact replica. One specific feature I want to emulate is having the button span the width of the screen for better visibility and usability. Is there a way I can style my button to achieve this effect on my new landing page as well?

To see the landing page that serves as my inspiration, you can visit:

Given that I am still learning to code, I would appreciate any guidance or advice you could offer. Thank you in advance for your help!

Best, Dan

cssbutton

Answer №1

When you mentioned the "CLICK HERE – IT’S 100% FREE" button, I believe you are referring to adjusting its width. To make the button span the entire page, consider adding width:100% to the corresponding section in the CSS stylesheet. Feel free to reach out if you require further assistance.

Answer №2

Update your CSS file with the following code snippet and give it a try:

.site-inner, .wrap {
    margin: 0 auto;
    max-width: 1100px;
    }


   .cubutton {
    display: block;
    box-sizing: border-box;
    border-radius: 99999px;
    background-color: #44ace8;
    color: #fff;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif;
    font-size: 20px;
    font-size: 2.0rem;
    font-weight: 700;
    text-align: center;
    letter-spacing: 1px;
    padding: 20px 40px 20px 40px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 25px;
    margin-bottom: 25px;
    width: 100%;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    -webkit-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
    box-shadow: 4px 4px 5px 0px rgba(50, 50, 50, 0.75);
    -webkit-transition: all 0.1s ease-in-out;
    -moz-transition: all 0.1s ease-in-out;
    -ms-transition: all 0.1s ease-in-out;
    -o-transition: all 0.1s ease-in-out;
    transition: all 0.1s ease-in-out;
}

Answer №3

sample website link

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
</script>
<style>
.myBtn {
    color: white;
    background-color: #44ace8;
    border-color: #44ace8;
    border-radius: 30px;
    padding: 20px;
}
.myBtn:hover {
  color: black;
}
  </style>
</head>
<body>

<div class="container">
  <div class="btn-group btn-group-justified">
    <a href="#" class="btn myBtn">CLICK HERE – IT’S 100% FREE</a>
  </div>
</div>

</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

Creating background images in select tag using only CSS

I am interested in achieving the following task This is a selection drop down form that I need to work on Here is the code snippet: HMTL <select> <option>Country</option> <option>I ...

formscss

Struggling to figure out Visual Studio Code - Having trouble loading images and fonts into my CSS file

It seems like I'm missing something here (just so you know, I'm totally new at this). I attempted to use fonts that are loaded on my computer for my CSS stylesheet (font file in my VSC), but no luck. I also tried using images from my files as bac ...

cssimagefonts

Utilizing the text field feature within Twitter Bootstrap 3.0 in-line styling

I am attempting to create a horizontal form with an inline text field split into two sections: one on the left and one on the right. The left side will contain horizontal text fields, some of which are inline, while the right side will have a mix of inline ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Challenging glitch in the JavaScript code

My jQuery code seems to be functioning properly in online text editors like Fiddle and StackOverflow snippets. However, when I try to implement the same code in Brackets or view it on GitHub, the navbar scroll down animation fails to work as expected. You ...

javascripthtmlcss

Concealing categories within an accordion-styled menu

Recently, I put together a list that includes various pieces of information along with an accordion menu. Take a look at the list However, I've encountered a small issue which has left me quite perplexed. When a menu item is clicked - for instance, ...

javascripthtmlcss

Discover the secret to extracting a unique style from inspect mode and incorporating it into your CSS design

I'm currently working on my angular project and I've imported the ngx-editor. My goal is to reduce the height of the editor, but I'm facing some challenges. After inspecting the element, I was able to adjust the height successfully within th ...

htmlcssangularstylesngx-editor

Sass Alert: The mixin called roboto-family is missing from the stylesheet. Trace: Problem detected in src/pages/forms/forms.scss at

Greetings, I am diving into the world of Ionic for the first time. Recently, I embarked on a new project in Ionic and decided to integrate a theme. To do so, I copied an .html file, an .scss file, and also created a .ts file. Forms.html <!DOCTYPE html ...

csstypescriptionic-frameworksass

Trouble arises when jquery's "position().top" clashes with the CSS3 property "transform: scale()"

Currently, I am working on adding a font resizer feature to my editing tool. To implement this, I made some changes to the text elements where their origin is now set to the bottom left corner. The normal version of the tool works perfectly fine, but when ...

javascriptjqueryhtmlcsscss-transforms

Creating a CSS key animation for resizing an image: What is the correct way to make an image expand and contract

Check out this CSS key animation example: http://jsfiddle.net/ryurage/Q2ELp/ I'm attempting to make an image grow and occupy most of the window when triggered by user interaction like hovering or click-and-hold. Subsequently, I want the image to shr ...

jquerycsscss-animations

Customizing the font style on a CSS changing table

Below is the CSS code snippet I am using: table.Table12 { border:1px solid blue; } table.Table12 td { border:1px solid blue; width:200px;} table.Table12 a:link { font-weight: bold;} Additionally, here is the HTML code: <table class="Table12" align="r ...

htmlcssfonts

The functionality of the jQuery click event is not functioning properly

I encountered a strange issue where the code below works perfectly fine when directly pasted into the browser (chrome console). However, it does not work when executed from my source file. <script type="text/javascript" > $(".test").click( ...

javascriptjqueryhtmlcss

The persistent space between the navbar and the index page remains despite the suggested fixes provided

There appears to be a discrepancy between the navigation bar and the rest of the page. Despite my efforts to adjust margins, I haven't been able to resolve it. The system is prompting me for more details before posting this question, but I'm unsu ...

csstwitter-bootstrap

Understanding the distinction between .navbar and .navbar a in CSS

Can you explain the distinction between .navbar and .navbar a? .navbar { overflow: hidden; background-color: #333; font-family: Arial; } .navbar a { float: left; font-size: 16px; color: white; ...

htmlcsscss-selectorsnavbar

The "Overall Quantity" of items will vary as it goes through different numerical values, despite the fact that I employed --

I am currently working on an e-commerce website with a shopping cart feature. The cart displays the number of items added to it, which increases by one when 'Add to Cart' is clicked and decreases by one when 'Remove' is clicked. However ...

javascripthtmlcss

Why won't the display: block CSS style apply to my div element?

Take a look at my code: https://jsfiddle.net/r62p4209/ I created a search bar with company brand name and some buttons on the right, positioned in the center. My aim is for the search bar (from "search by:" to the "Go!" button) to move onto the next lin ...

htmlcssdisplay

Retrieve the content from a textarea and insert it into a different textarea with additional text included

Users can input HTML codes into a textarea named txtar1. A 'generate' button is available; Upon clicking the 'generate' button, the content of txtar1 will be transfered to another textarea named txtar2 with additional CSS code. Here&ap ...

javascriptjqueryhtmlcss

Is there a way to ensure dropdown links in a responsive menu can extend past the menu's height?

Recently, I have been working on creating a CSS responsive main menu by combining code snippets from different sources. Despite my efforts, I encountered a major issue in the form of dropdown menu items disappearing when they extend beyond the normal heigh ...

htmlcss

Twitter Bootstrap 3 - Change column order for extra small screens

My Twitter Bootstrap layout consists of two columns structured like this: <div class="col-md-4 col-sm-6 col-xs-12"> <div class="post"> Content here </div> </div> <div class="col-md-8 col-sm-6 col-xs-12"> <di ...

htmlcsstwitter-bootstrapgrid-layout

Guide to centering a list on a webpage using Bootstrap 3

Looking to create a centered list using the latest version of Bootstrap 3. Any tips? The desired list should be positioned in the middle of the page. ___________________________________________ | | | ...

htmlcsstwitter-bootstrap

empty area located on the right side of my HTML/CSS website

I'm struggling to figure out why a small white space appears next to my webpage. Inspecting the element shows that the body ends before the space begins, indicating the border is where it should be. As a beginner in HTML and CSS, I hope this issue wil ...

htmlcsswhitespace