Blurry font rendering occurs when an element is scaled using CSS

I want to add a scale animation to a bootstrap button, but the text appears blurry. I've tried all the solutions mentioned here. How can I resolve this issue?
Below is the code snippet (text is slightly less blurry in the snippet compared to my project):

button.btn-outline-dark{
    margin-top: 6%;
    width:30%;
    height: 17%;
    color: black;
}
button.btn-outline-dark:hover{
    transition: all .2s ease-in-out;
    transform: scale(1.1);
    -webkit-font-smoothing: subpixel-antialiased;
    backface-visibility: hidden;    
    -webkit-filter: blur(0);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">


<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#exampleModal">
    Blurry Text
</button>

htmltwitter-bootstrapcssbootstrap-4

Answer №1

Like I mentioned earlier in the comment, here is an alternative approach to achieve the same effect without using zoom:

button.btn-outline-dark{
    margin-top: 6%;
    color: black;
    transition:0.5s;
    padding: 10px 40px;
    font-size:14px;
}
button.btn-outline-dark:hover{
    font-size:20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<button type="button" class="btn btn-outline-dark" data-toggle="modal" data-target="#exampleModal">
    Blurry Text - Not Anymore
</button>

Adjustments may be needed to achieve your specific styling preferences but it should function correctly.

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

Accessing an element by its ID with the help of a looping

Looking to retrieve a string from my database and insert it into my paragraphs: <p id="q_1"></p> <p id="q_2"></p> The following code works correctly: $.get("bewertung/get/1", function (data) { document.getElementById("q_1") ...

javascriptjqueryhtmlnode.jsexpress

Tips for keeping my background image from shrinking when I resize the window?

When I resize the webpage window, my background image shrinks in size. Currently, it is not repeating (which is a step forward), but now I need it to cover the entire screen to avoid showing white space around the background when the window gets smaller. ...

htmlcss

What is the method in PHP to send an HTML file along with a value in response to a POST request?

I have a PHP file where I want to include a dropdown list and submit button. The dropdown list should display filenames for the user to choose from. Once the user selects a filename from the dropdown list and clicks the submit button, the PHP file should r ...

phphtml

Is there a way to grab code from a different HTML page using JavaScript and jQuery when the user clicks on something?

After testing various codes for the intended purpose mentioned in the title, I have observed a peculiar behavior. The code from settings.html appears briefly and then disappears rapidly. Javascript: function load() { $("#paste").load("settings.html") ...

javascriptjqueryhtml

Event handler for the MouseLeave event is not successfully triggering when dealing with anchor

When viewing a link to a Codepen, the issue is most noticeable in Chrome: https://codepen.io/pkroupoderov/pen/jdRowv Sometimes, the mouseLeave event fails to trigger when a user quickly moves the cursor over multiple images, resulting in some images reta ...

htmlcssreactjshovermouseleave

Displaying Edit and Delete options upon hovering over the data row

I'm working on a table that uses ng-repeat on the <tr> element. In the last column of each row, I have edit/delete links that should only be visible when the user hovers over the <tr> element. <tr ng-repeat="form in allData | filter:se ...

cssangularjsng-class

I am interested in implementing a logout feature using a button in PHP

<?php session_start(); ?> <form> <input type="button" id="logout" value="logout" name="logout"> </form> After initializing the session during login, I am seeking to terminate it using a button rather than via <a href="">l ...

javascriptphpcsshtml

What is the best method for automating the transfer of data from a database to the user interface of a website using html and javascript?

As a volunteer coordinator for a non-profit organization, I have some basic experience working with Python. I am willing to dedicate fewer than 8 hours of learning time to my current project in order to automate certain tasks (or else I will do them manual ...

javascripthtmldatabasebrowser-automation

Please provide either your username or email in the login field

After successfully implementing a register and login system on my website, I am faced with a new challenge that has me stumped. The registration page currently has three input fields: Username Email Password Now, I want to simplify the login process by ...

phphtmlsqlauthentication

Instruct the VirtualHost DocumentRoot to redirect the HTML from "/" to a subfolder within the WWW directory

Apologies for repeating this question, but despite extensive discussions on the topic, I am struggling to find a solution for setting up a local development environment using VirtualHost. Currently, I am using XAMPP Portable for Windows, but I believe the ...

htmlapache.htaccesshttp-redirectvirtualhost

How to Implement Loading Image with CSS

I have customized the CSS code below to style a div element that showcases a responsive image. .my-img-container { position: relative; &:before { display: block; content: " "; background: url("https://lorempixel.com/300/160/") ...

htmlcsspseudo-classresponsive-images

How to create ::after pseudo-element with identical width as its preceding sibling

My HTML code includes a <div> container with an <img> and an ::after pseudo-element. Check it out: <div class="container" data-caption="The caption should match the width of the image and wrap accordingly"> <img> </div> . ...

htmlcss

Choosing the right CSS selectors for elements within other elements

I'm trying to add a stagger effect to the fade-in animations of images within a gallery. After looking over my code, I believe the issue lies in how I am setting the animation-delay in the CSS selector. I am not sure if SCSS is supported in this snipp ...

htmlcsscss-selectors

What is the best way to ensure that my Material UI container occupies the entire width and height of the

Struggling to fit my content within a Material UI container in a React project, but it's creating odd margins. Check out the current look: https://i.stack.imgur.com/TaQs2.png Here's how I want it to display with full width: https://i.stack.imgur ...

cssreactjsmaterial-ui

ESLint error: EROFS read-only does not correspond to any directory

Can anyone help me with this issue? I am experiencing a problem when using Linux dual boot, but everything works fine when I use Windows. ERROR in [eslint] EROFS: read-only file system, open '/media/naufal/6878124278121004/Refactory/Skill-Test-Re ...

javascripthtmlcssreactjs

Is it possible for a complete CSS ".class" to possess the specificity of '!important'? [closed]

It's quite challenging to determine the exact inquiry being made here. This question lacks clarity, precision, completeness, specificity, and is overly general or rhetorical, making it impossible to answer in its current state. To obtain assistance in ...

jquerycssclasscss-specificity

What is the best way for a background-image to determine its height in CSS?

I am currently working on a website project and I would like to include my title using a background-image because it uses a unique font. In my design class, we were taught that this is the best approach. However, I am struggling with setting the correct di ...

htmlimagecss

Determine with jQuery whether the img src attribute is null

My HTML structure is as follows: <div class="previewWrapper" id="thumbPreview3"> <div class="previewContainer"> <img src="" class="photoPreview" data-width="" data-height=""><span>3</span> </div> </div> ...

javascriptjqueryhtmlimage

`` I am experiencing a problem with CSS display block in Internet Explorer

Looking to implement a basic tab menu using a combination of tables and div elements. The goal is to have the tabs switch styles when clicked, giving the appearance of being toggled, while also swapping out the corresponding content in separate div blocks ...

javascripthtmlcssinternet-explorertabs

Conceal Bootstrap Toast for a day following dismissal

I have implemented Bootstrap 5 toasts to showcase an advertisement on my website. The goal is to make the advertisement disappear for 24 hours once the user closes it. Here's the current code snippet: <div class="position-sticky bottom-0" ...

javascripttwitter-bootstraplocal-storagebootstrap-5