What are some ways to improve the appearance of a bootstrap styled button text to make it look cleaner and more polished

I think there is room for improvement here. When you look at the js fiddle, the text appears blurry and not as polished as it could be. Any suggestions on how to make the text sharper and more professional?

Would using @font face to import fonts help? And can I do that with laravel-mix somehow?

https://jsfiddle.net/t9b8ukoz/

.btn-enquiry {
background-color: #C30030;    
height: 50px;
color: #ffffff;
font-family: Helvetica Neue LT Std;
border-width: 0;
font-size:20px;
border-radius: 40px;
margin-top:30px;
}

.btn-enquiry-no {
background-color: #ffffff;
border-color: #C30030;   
height: 50px;
color: #c30030;
font-family: Helvetica Neue LT Std;
border-width: 2px;
font-size:20px;
border-radius: 40px;
margin-top:30px;
}

<div class="container">
<div class="row">
<div class="col-sm-4">
<button class="button btn-block btn-enquiry">Yes</button>
<button class="button btn-block btn-enquiry-no">No</button>
</div>
</div>  
</div>

Answer №1

To import fonts, you can utilize the url method like so:

@font-face {
   font-family: 'Open Sans';
   font-style: normal;
   font-weight: 400;
   src: local('Open Sans Regular'), local('OpenSans-Regular'), 
   url(https://fonts.gstatic.com/l/font?kit=9Q2eFUjC6sxswAD7ovJhWviet_SOqtdNbXx86c3YJyI=&skey=c234f89a784756d3&v=v23) format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, 
   U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, 
   U+FEFF, U+FFFD;
}

Answer №2

After downloading some new fonts, I placed them in the /assets/fonts folder within the /resources directory.

I then made sure to include this in my webpack.mix.js file:

let mix = require('laravel-mix');
mix.config.fileLoaderDirs.fonts = 'assets/fonts';

Next, I added the following code to my custom CSS file:

@font-face {
font-family: 'OpenSansRegular';
src: url('../assets/fonts/OpenSans-Regular-webfont.eot');
src: url('../assets/fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../assets/fonts/OpenSans-Regular-webfont.woff') format('woff'),
url('../assets/fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
url('../assets/fonts/OpenSans-Regular-webfont.svg#OpenSansRegular') format('svg');
font-weight: normal;
font-style: normal;
font-display: swap;}

Upon compiling with npm and laravel mix, everything worked perfectly!

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

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

Is it possible to dynamically adjust the size of the CircleProgressComponent element in ng-circle-progress?

For my current Angular 11 project, I am facing the challenge of dynamically changing the size of the ng-circle-progress library's CircleProgressComponent element. After some research, I discovered that the element's size can be adjusted by apply ...

Is there a way to customize the scrollbar color based on the user's preference?

Instead of hardcoding the scrollbar color to red, I want to change it based on a color variable provided by the user. I believe there are two possible solutions to this issue: Is it possible to assign a variable to line 15 instead of a specific color lik ...

I experienced issues with the brackets software freezing up while using the Bootstrap min CSS file

Recently, I've been using brackets as my text editor and have run into an issue with the bootstrap.min CSS file. For some reason, it keeps freezing whenever I try to load it in brackets. Oddly enough, HTML files work perfectly fine, but ...

I'm currently attempting to create a dynamic object using code, but it doesn't seem to be functioning as expected. I'm curious about what might be causing the issue

I am brand new to exploring JavaScript, HTML, and CSS. I've gone through my code several times but can't quite pinpoint what's causing it not to function properly. While there are no apparent errors being returned, the expected behavior is n ...

Align the final row to the left in a flexbox that is centered

My issue involves a flexbox containing NxN squares. I need the container to adjust to fit as many squares as possible within the display width, while also center-aligning the flexbox on the page. The problem arises when I set the CSS property: justify-con ...

Issue with Material UI React: Navbar does not properly align the box to the right side

https://i.sstatic.net/CHSwp.png I'm facing an issue with my navbar that is supposed to align all the page options to the right. Despite using a flexbox layout and trying different alignment properties like alignSelf: end, the text only moves slightly ...

Convert a linear gradient into an object

Can someone help me convert the linear-gradient value into an object with keys and values? Here is the initial value: linear-gradient(10deg,#111,rgba(111,111,11,0.4),rgba(255,255,25,0.1)) I would like it to be structured like this: linear-gradient: { ...

Options for regular expressions in CSS: match letters regardless of case and search for all occurrences

Here is the HTML I am working with: <div> <img class="hi" src="http://i.imgur.com/f9WGFLj.png"></img> <img class="HI" src="http://i.imgur.com/f9WGFLj.png"></img> </div> Additionally, I have the following CSS co ...

Fade-in loader with centered placement on the full page

As a newcomer to programming, I wanted to implement a loader that displays a centered loading animation when the page loads or refreshes. The animation should gray out and fade the entire page until it fully loads. I've managed to get everything else ...

When trying to implement a dark/light theme, CSS variables may not function properly on the body tag

Currently, I am in the process of developing two themes (light and dark) for my React website. I have defined color variables for each theme in the main CSS file as shown below: #light{ --color-bg: #4e4f50; --color-bg-variant: #746c70; --color-primary: #e2 ...

What is the best way to make my div equal in height to its preceding div sibling?

I want my new div to match the height of the previous one. I'm using percentages for width and height to ensure it displays properly on mobile devices as well. I've tried setting the parent elements to 100% width and height based on suggestions f ...

Dynamically modifying the styling of elements within an iframe

In my current project, I encountered a challenge with changing the background color to black and the body text color to white within an iframe. Additionally, all elements that are originally styled with black in an external stylesheet also need to be chang ...

"Bordering with Rounded Edges: A CSS Styling

Applying rounded corners to my list navigation elements using CSS. These elements also have a border. Here's how it currently appears: The quality of the rounded corner and border combination looks off, with some white shining through. Any suggesti ...

When attempting to input data into the database, an error is displayed stating that /test.php cannot be POSTed

Every time I try to input data using PHP, it throws an error Cannot POST /test.php. I've been attempting to fix it with no success. Can anyone please help me solve this issue? It's crucial for my project work. Here is my HTML code: <html> ...

Is there a way to extract the ID or other attributes from a clicked element using AMP HTML and incorporate them to generate a URL for an anchor tag?

I have a collection of checkboxes, each with its own unique ID. When a checkbox is clicked, I need to extract the ID and generate a string like '/some/path/?myids=checkOne,checkTwo' (where checkOne and checkTwo are IDs of two different checkboxes ...

What is the best way to design a shape (a quadrilateral with rounded edges) using CSS?

Struggling with creating a widget in React Js that has an image as the background? The image is designed to be dynamic, changing color and size based on the device. I've attempted using inline SVG and SVG within an img tag but can't seem to contr ...

Adjust the size and color of text in Chart.js using Angular 5

Why does the font color in chartjs appear as light gray and not print when you want to do so from the page? I tried changing the font color of chartjs in the options attribute, but it didn't work. How can I change the font color in chartjs angular? ...

What is the best way to incorporate background color into child rows that are dynamically added in Datatables?

I am dynamically appending child rows to datatables in order to display data that is retrieved dynamically. Below is the code snippet illustrating this: var oTable = $('#myTable5').DataTable(); var tr = $('#'+id).closest('tr' ...

The selected custom button color is not appearing as intended when viewed in the

I'm currently in the process of creating a small webpage dedicated to showcasing my top favorite Zelda bosses using HTML, CSS, and Bootstrap 5. To make it more personalized, I decided to veer away from the standard Bootstrap button colors and create m ...