Alter the color of Material UI Raised Button when it is hovered over

I am trying to change the background color of a raised button on hover in Material UI. I attempted the following, but it did not work. Is there a way to modify the background color in Material UI for a raised button?

Example.JS

<RaisedButton 
        className="button"
        secondary={false}
        label="LOGIN"
        fullWidth={true}
        labelPosition="before"
        icon={<img src="../../images/next.png" />}
        onTouchTap={() => signinWithEmailAndPassword(document.getElementById('Email').value, document.getElementById('password').value)}
        />

Example.css

    .button{
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #00BCD4;
}

    .button:hover{
        background-color: #00BCD4;
        color: #FFF;
    }

Answer №1

To modify the color without setting an image as a background, you can adjust the background-color property, but it is important to consider the specificity of selectors.

Below is a sample code snippet for styling a button:

.button {
   position: absolute;
   bottom: 0;
   left: 0;
   background-color: #00BCD4 !important;
}

.button:hover {
   background-color: green !important;
   color: #FFF;
}

The use of !important gives maximum weight to selectors and is typically employed for checking styles rather than regular usage.

If you wish to change the color of your button, make sure to assign appropriate classes to increase the specificity of selectors compared to existing ones.

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

What is a simple way to center a box on a page without relying on margins?

I'm attempting to position a box in the center of the page without relying on margin. Here's what I've tried so far: .box-middle { vertical-align:middle; height:100px; width:100px; border:1px solid #ddd; } This approach h ...

Is there a way to resize a photo that I want to upload?

Have you visited this website? ---SPANISH LANGUAGE Here is another site to check out: ENGLISH LANGUAGE I'm having trouble with the image on the Spanish site showing up correctly. I want it to look like the image on the English site's front ...

Changing CSS attributes with jQuery when conditions are met

After creating menus with expandable items that change style upon clicking, I encountered an issue where the styling changes were not being applied correctly. To address this problem, I followed Sushanth's suggestion and replaced $this with $(this), ...

managing interactions on unique components

I have a few files in my project: button.module.css .base { display: flex; font-size: 16px; font-family: "Helvetica Neue"; align-items: center; justify-content: center; padding: 6px 12px 6px 12px; width: 50px; bor ...

Adjust the size of the text within the div element as needed

Here is my code on jsFiddle where I am dynamically changing the text font to fit in the div. Everything is working perfectly fine. Currently, the text is within a span element, but I would like to remove the span and have the same functionality. However, w ...

Issues with a top navigation bar

I'm currently working on customizing a header menu to my liking but have limited experience with CSS. The header menu consists of two main items, each with a dropdown. I envision the first menu item to look like this upon hover: And for the second m ...

`Unable to enter text into an input box`

Here is the code snippet that I'm working with: constructor(props) { super(props); this.state = { search: "", value: "", username:'', email:'', ...

Is there a way to manipulate the placement of an image within a div using CSS?

Teaching myself HTML has been quite the journey. Right now, I'm in the process of building a website purely for its aesthetic appeal, and I seem to be hitting a roadblock with the CSS/div element. As of now, it appears like this. When the h1 is remove ...

Why do the props being retrieved from Redux seem to be undefined?

I downloaded the starter template from mern.io and encountered an issue when trying to run the code below. The error message I received was: "ReferenceError: props is not defined" EventDetailPage.js : import React, {PropTypes} from 'react'; imp ...

The automatic filtering feature does not kick in when the sorting is changed

I've been working on an app that features a video database, allowing users to filter videos by category and sort them by rating. https://i.sstatic.net/cESZT.png Currently, the filtering system works fine once the options are changed. However, there ...

Implementing a modal component into a React JS page upon loading

I've been working on a webpage using React JS. The site's structure follows MainContent.js --> Main.js --> ReactDOM render. I recently tried to implement a modal popup that worked perfectly in its own project, but ran into issues when impor ...

typescript ways to exclude enum values

I am working with enums in TypeScript. enum Status { Cancelled = 'cancelled', Completed = 'completed', Created = 'created' } Now, I need to create another enum that includes only the values Completed and Created. enum S ...

Is it possible to use custom hooks in GetStaticProps() within Next.js?

Is there a way to utilize the custom hook within the getStaticProps() function? We are fetching data from the Contentful CMS using the Delivery API, and having custom hooks for specific data retrieval would be more convenient. When attempting to call useH ...

Stop flex items from expanding larger than their sibling elements

Is there a way to prevent a flex item from growing bigger than its siblings? Check out the example on CodeSandbox: LINK Here is the sample code: <div class='wrapper'> <div class='box one'></div> <div class ...

How can one manage styling choices in R Markdown while creating a PDF document?

Currently, I am utilizing R Markdown within the RStudio platform to produce documentation. When selecting the "Knit HTML" option, my output appears satisfactory. The ability to modify styling options and apply CSS Files directly is a beneficial feature. ...

Add the list of information during the looping process (map)

I am currently facing a challenge where I need to update my data during the iteration and send the results to an API call. The API Call expects a request with data structured in the following format: { list: [{ id: "1", name: "Hello" ...

Ensuring type safety in React using TypeScript

Within the code snippet below, I have specified that setLocale should be passed a value of type Locale through LocaleContextValue. However, why does the setLocale function not throw an error if no value is provided as a parameter? Even when I change it t ...

Reducer fails to activate

I'm facing a challenging situation. In my rhythmReducer.js file, I have the following code: import {TOGGLE_NOTE_VALUE} from '../constants/actionTypes'; import objectAssign from 'object-assign'; import initialState from './in ...

How to access the current class in Sass without referencing the parent class

.site-header .basket position: relative &-container width: 100% padding: 0 18px $basket: & &.opened #{$basket}-link border: 1px solid #e5e5e5 ...

What is the method for creating a curved CSS Pseudo element background?

Currently, I have implemented a red pseudo element as part of the background for certain sections on my website. Although everything is functioning correctly, I am interested in transitioning the straight line to a curved one instead. Does anyone know ho ...