Ways to eliminate the default button styling

I've encountered an issue with the CSS for a button that I created, as it is not displaying as expected. https://i.sstatic.net/qHLZX.png

Below is my HTML code snippet:

.button{
  /* center the button */
  margin: 0;
  position: absolute;
  top: 70%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* provide color and style */
  background-color: #008CBA; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  cursor: pointer;
}
<div class = button>
   <button type="submit" class="registerbtn">Continue</button>
</div>

Can anyone suggest a solution to rectify this problem?

htmlcss

Answer №1

Check out this new code snippet:

.button button {
  margin: 0;
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
  transition: 300ms;
}

button:hover {
  background: #007095;
}
<div class = button>
  <button type="submit" class="registerbtn">Continue</button>
</div>

Answer №2

To achieve this effect, you should style the button element itself rather than targeting the button class within another element. Here is an example of how to do so:

button{
  /* center the button */
  margin: 0;
  position: absolute;
  top: 70%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  /* add color and style */
    background-color: #008CBA; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    cursor: pointer;
}

If you prefer to use another container div (although I don't recommend it), you can remove the button element properties by adding the following CSS code:

button{
    background: transparent;
    border: none;
}
button:focus{
    outline: none;
    border: none;
}

Answer №3

To customize the appearance of your button, simply assign a class to it and apply your desired styling.

.custom-button {
  border: 2px solid blue;
  border-radius: 1rem;
  background: lightblue;
  color: darkblue;
  font-family: Arial, sans-serif;
  font-weight: bold;
  padding: .5rem;
  cursor: pointer;
}

.custom-button:hover {
  background: darkblue;
  color: lightblue;
}
<button class="custom-button">Click Me</button>

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

SASS : Loop not producing the most efficient CSS output

Is there a way to optimize CSS generation using a @for loop in SASS? An example speaks louder than words: Here is my SASS code: @for $i from 1 through 2 { .table-lg-#{$i}, .table-md-#{$i}, .table-sm-#{$i}, .table-xs-#{$i} { background: red; ...

cssloopssass

Angular - The differ is unable to find support for the object 'Item One' which is of type 'string'. NgFor is only able to bind to Iterables like Arrays and not individual objects

Many questions on StackOverflow share similarities with this one, but I have not been able to find a solution that fits my issue. My code functions correctly when attempting to populate items in a "Select" control. It successfully retrieves data if the it ...

htmlangulartypescript

Bootstrap 5's gutter-x class is causing alignment issues with divs

My div alignment is getting thrown off due to the default .row class. The margin_left and right call it includes add gutters that cause borders to overlap my div. Although I have disabled gutters in this particular element, it leads to problems elsewhere o ...

htmltwitter-bootstrapbootstrap-5

No JavaScript needed: Create custom overflow/scroll indicators using CSS only

Is there a way to align the content of a box to the left when the box doesn't overflow? I have a scroll indicator created with CSS only, which works well but has this alignment issue. Any suggestions or improvements on the code are welcome :) html ...

css

Guide to positioning Navigation Bar in the center

I'm currently in the process of updating my website, but I've encountered a problem that I can't seem to solve. The issue revolves around the positioning of my navigation bar. Currently, it is situated below some JavaScript content and on t ...

htmlcss

Why is it not possible for me to place my image and text side by side?

I've been working on my personal portfolio website and ran into an issue when trying to position the image with text that says Ib student. I attempted using the bootstrap box model which didn't work, followed by using float, but that also didn&ap ...

htmlcssbootstrap-5

Achieving full white space utilization with inline block elements

When attempting to stack elements on top of each other, I encounter unwanted white space due to varying heights of the elements. I am trying to figure out how to move boxes 6 and 7 up while keeping all corresponding elements beneath them aligned properly. ...

htmlcssflexboxdisplay

Utilizing box-sizing for the creation of an internal border

Looking to create an HTML table with clickable cells, each containing a div that adds a border upon clicking. The challenge is ensuring the border stays within the boundaries of the td without altering the size of the table or its cells. Struggling to achi ...

htmlcss

CSS - Implementing Below Element Validation Message in MVC 3

Hello everyone, Currently, I am looking for a way to show input validation messages below the element instead of beside it. The default CSS file adds a margin-bottom of 19px to the <input /> element, so I need to adjust this positioning in order to ...

cssasp.net-mvc-3

Utilize MaterialUI's stepper component to jazz up your design with

Is there a way to customize the color of a material ui Stepper? By default, the material UI stepper's icons use the primary color for both "active" and "completed" steps. class HorizontalLinearStepper extends React.Component { state = { activeS ...

javascriptcssreactjsmaterial-ui

Insert the <span> element within the <a> element with the help of Jquery

I am attempting to insert a span tag inside .block-leftnav ul li .parent a, however, instead of adding the tag after only the .parent a, jQuery is adding the span tag after every href tag on my page. Below is the code I am using to achieve my desired outc ...

javascriptjqueryhtmlcss

Creating a visually appealing layout with three equal columns side by side in Bootstrap 4

I am trying to keep my CSS efforts minimal by utilizing Bootstrap for a simple layout. However, I am encountering an issue with a horizontal scroll. If anyone has a solution or can point out what I may be missing, please share. <!DOCTYPE html> < ...

htmlcssbootstrap-4

Adding a CSS class to an HTML element using JQuery

I have a collection of tabs, and I want to dynamically add an <hr> element with the class "break-sec" when a certain class is active. This element should be placed within a <span> element with the class "vc_tta-title-text" after the text. Here ...

javascriptjqueryhtmlcssvisual-composer

Creating a 2x2 grid layout with flexbox styling

Having trouble creating a customized 2 by 2 grid using flexbox at the moment. Here is my goal: https://i.sstatic.net/uiGOD.png The height of 1 and 2 should be smaller than 3 and 4. And the width of 1 and 3 should be wider than 2 and 4. I attempted to a ...

htmlcssflexbox

Learning the art of Javascript programming within the HTML5 realm

Seeking assistance with a JavaScript project - I'm attempting to develop a Bubble Buster game reminiscent of pong, but with multiple bubbles. The goal is to have falling bubbles on screen (roughly 100 in total) in various colors dropping from random l ...

javascripthtml

Conceal the calendar icon from the date-type HTML input field specifically on the Firefox

The situation at hand is quite straightforward. <input type="date /> When viewed on Firefox (both desktop and mobile), it appears as follows: https://i.stack.imgur.com/S2i0s.png While the internet provides a solution specifically for Chrome: ...

htmlcss

HTML text/code ratio display tool

I need help finding a firefox/firebug plugin (or any OFFLINE tool is fine) that can show me the real text/markup ratio. While there are some online options available like and a Firefox plugin at https://addons.mozilla.org/en-US/firefox/addon/150366/ (whi ...

htmloptimization

Is it possible to make a div resize to fit its container?

I have a square block measuring 100*100px. The container block it is within can be resized. I need the inner block to adjust its size dynamically so that it always fits inside the parent container without overflow and maintains its square shape. Important ...

htmlcss

What are the steps to designing customizable drop-down content menus on websites?

I am looking to implement a feature where I can create content drop-down bars similar to the ones shown in the images. When a user clicks on the bar, the content should be displayed, and if clicked again, the drop-down should hide. I have searched for a so ...

javascripthtml

Choose an option with JavaScript once the request is successful

Choose the day, month, and year using JSON data success: function(jsondata){ var data=JSON.parse(jsondata); var list_html="<div id='editrelation'><label id='dateLabel' style='display:none&apo ...

javascripthtmlselectedindexselectedindexchanged