To enhance the button design, incorporate background shades, underline, and capitalize the text

I'm having some trouble creating a standard button. I can't seem to figure out why the text won't convert to uppercase when using text-transform: uppercase;. Additionally, I want to disable the text underline after the button is clicked.

$btCol: #ff6600;

.Btn {
    background-color: #fff;
    border: 1px solid $btCol;
    display: inline-block;
    cursor: pointer;
    color: #000;
    font-size: 12px;
    padding:5px 5px;
    text-decoration: none;
    text-transform: uppercase; //why does this not work?
}
.Btn:hover {
    background-color: lighten($btCol, 50%);
    text-decoration: none;
}
.Btn:active {
    position: relative;
    top: 1px;
}
.Btn:disabled {
    background-color: #eb675e;
    color: #999;
}

EDIT:

html:

<a href="#" class="Btn">light red</a>
htmlcss

Answer №1

If you're tired of applying various styles to anchor tags, consider creating a button instead for a more semantic approach. You can view an example I made on this fiddle:

https://jsfiddle.net/x81pln7t/8/

Here is the HTML markup:

<button class="Button"><a href="#">Dark Green</a></button>

And here is the CSS code:

.Button {
    background-color: #000;
    border: 1px solid #005500;
    display: inline-block;
    font-size: 14px;
    padding: 6px 8px;
    text-transform: capitalize; /* why doesn't it capitalize the text? */
}

.Button a {
    text-decoration: none;
    color: white;
}

.Button:hover {
    background-color: lightgreen;
}

.Button:active {
    position: relative;
    top: 2px;
}

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

Error: The function window.intlTelInput is not recognized within the ReactJS framework

I am currently learning ReactJS and encountering an issue when using jQuery with React JS for intlTelInput. I have installed npm jQuery and imported all the necessary code. Additionally, I have included all the required CSS and jQuery links in my index.htm ...

javascripthtmljquerycssreactjs

How to style tags between select options in HTML using React JS?

Is there a way to customize the appearance of a span element that is nested within an option tag? <select> <option value="option1">Active Wallet <span style={{fontWeight:'bold!important'}}>mBTC</span></o ...

htmlcssreactjs

Every time I rotate my div, its position changes and it never goes back to

Trying to create an eye test by rotating the letter "E" when a directional button is clicked. However, facing an issue where the "E" changes position after the initial click instead of staying in place. Here is a GIF showcasing the problem: https://i.stac ...

javascripthtmlcsstransform

Restrict modifications in Sharepoint 2013 to text only

Can content editors be restricted to only adding text on websites? I want to prevent them from using inline styling in HTML or buttons in the editor to add styles. I'm dealing with a few rebellious editors who like to get creative with colors and sty ...

csssharepointtexteditorsharepoint-2013

The Bootstrap col-sm-6 class is not functioning as expected on mobile devices

I have been organizing products from a SQL table into <div class="col-sm-6 col-md-6 col-lg-3 col-xl-3 main_item_div mt-4 mb-4"> divs. The issue I am encountering is that on mobile devices, the col-sm-6 class does not seem to be functioning properly. ...

htmlcssbootstrap-4

A viewless Angular 2 component

Is it feasible to utilize Angular 2 without the need for a template or an @View? I am exploring alternative methods akin to the example shown below: Angular 1 index.html <div ng-controller="appcontroller"> <div ng-class="{active: isActive()}"& ...

javascripthtmlangularjstypescriptangular

Exploring the Power of JSON-Objects in AJAX

I need help loading only a portion of a text file (*.txt) into my HTML. The other part of the file provides information about the number of li's in it. The content of the text file is structured as a JSON-Object and here is an example: {"content": [ ...

htmlajaxjson

Which li in the row is the final target?

In my list of items, there are no special classes assigned to the list items. <ul> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> <li>item</li> ...

javascriptjquerycsshtml-lists

Changing the Direction of News Ticker Movement from Right to Left

I need to switch the news ticker movement direction from right to left to left to right because I will be using Arabic language, so it is crucial to change the movement direction. Despite trying for several days, I have been unable to find a solution. HTM ...

javascripthtmlcssright-to-left

How can I modify CSS styles in AngularJS with Bootstrap UI?

Utilizing bootstrap UI in conjunction with AngularJS directives, I am looking to customize the default styles that bootstrap applies to its elements. Is it recommended to target the HTML contents within the template? Referring to the examples provided in ...

cssangularjstwitter-bootstrapangular-bootstrap

How can I dynamically insert HTML content into a data-attribute using JavaScript?

I have been trying to insert a variable that includes HTML code into a DATA attribute (a href ... data-content= ...), but it isn't functioning properly. The code I input seems to delete certain characters and as a result, it does not display correctly ...

javascriptjqueryhtml

Can you identify the origin of the inclusion of a .php file?

Is there a way to automatically determine if a PHP script is being accessed directly as an HTML page, used as a JavaScript file, or utilized as a CSS Stylesheet? I'm looking for a solution that doesn't involve GET variables or setting a flag wit ...

phpjavascriptcssincludeheader

Showcasing a selection of items from an array using Angular

I'm struggling with a particular implementation. I have an array filled with objects, and I only want to display the "name" property of those objects in a dropdown menu. When a user selects an option, I would like to access the entire object. Is this ...

htmlangularangularjstypescript

"Skip the inbox clutter and access the compose page directly on Gmail, Yahoo, and

I was looking to create a unique hyperlink that would direct users to a compose page similar to Google Mail. Here is an example of what I tried: <li><a href="https://inbox.google.com/mail/?view=cm&fs=1&<a href="/cdn-cgi/l/email-protect ...

htmlemailhyperlink

Is there a way to eliminate browser-saved password suggestions using Material UI textfields?

"Is there a way to prevent browser suggestions in a Textfield within a form tag so that users must manually type their password without autocomplete options?" https://i.sstatic.net/Mub57.png "I attempted to use the 'autocomplete=" ...

cssreactjsbrowsermaterial-ui

What is the process to modify the color of text that has been _selected_ within a `St.Entry` component in a Cinnamon Applet for the Gnome

I am facing an issue with a St.Entry widget in my Cinnamon applet where the text color is set to black using CSS. However, the selection color of this widget is also black, causing selected text to be unreadable in the theme I am using:https://i.stack.imgu ...

cssgnome-shell-extensionsgjscluttercinnamon

Data is transmitted from the server side to standard HTML

Is there a way to transfer data from the server-side to the client-side without relying on view engines like Pug or EJS? Currently, I am using XHTTP requests to retrieve data, but it would be more convenient to minimize that dependency. function getAllBe ...

javascriptjqueryhtmlexpress

Issues with modals appearing improperly after transitioning to NG-Bootstrap 15 and Bootstrap 5 upgrade

UPDATED following a thorough examination: In the process of upgrading our application from NG-Boostrap v11 with bootstrap 4 to NG-Boostrap v15 with Bootstrap 5 and Popper, we also made the switch from Angular 15 to Angular 16. Despite successfully resolvi ...

cssangularbootstrap-5ng-bootstrap

Ensure that the card header in Bootstrap CSS is consistently displayed at a height of two lines

I am currently developing a webpage using Angular, where bootstrap cards are generated dynamically. The code snippet for this looks like the following: <div class="row"> <div class="card border-primary p-0 mb-2 col-md-4 col-sm-6 colxs-12" *ng ...

csstwitter-bootstrapbootstrap-4

What is the best way to merge multiple attributes into a single attribute in HTML?

Is there a way to set a margin for a section of my site without it treating each attribute individually? I want to treat them as one attribute instead. Here's an example: <div style="background-color: grey; padding: 13px;"> <h1>This p ...

htmlcss