Creating a stylish CSS button with split colors that run horizontally

Could you please provide some guidance on creating a button design similar to this one? I've made progress with the code shown below, but still need to make adjustments like changing the font.

<!DOCTYPE html>
<html>
<head>
<style>
.button {
 -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    --antd-wave-shadow-color: #1890ff;
    --scroll-bar: 0;
    font-feature-settings: "tnum","tnum";
    -webkit-font-smoothing: antialiased;
    box-sizing: border-box;
    margin: 0;
    overflow: visible;
    text-transform: none;
    font: 16px/1.4 Sen,sans-serif;
    line-height: 1.5715;
    display: inline-block;
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    transition: all .3s cubic-bezier(.645,.045,.355,1);
    user-select: none;
    touch-action: manipulation;
    border: 1px solid #d9d9d9;
    outline: 0;
    border-color: #1890ff;
    text-shadow: 0 -1px 0 rgba(0,0,0,.12);
    box-shadow: 0 2px 0 rgba(0,0,0,.045);
    -webkit-appearance: button;
    padding: 6.4px 20px;
    border-radius: 40px;
    width: 230px;
    height: 68px;
    font-size: 18px;
    color: #fff;
    font-weight: 700;
    background: #5675ff;
    font-family: RobotoBold3;
    position: relative;
    margin-right: 20px;
}
</style>
</head>
<body>

<button class="button">BUY X </button>

</body>
</html>

Answer №1

Instead of going through complex calculations, it's best to utilize border radius.

If you want a guide, check out this example on Codepen:

https://codepen.io/aSH-unveil/pen/VwXJgaj

The key technique here is using border-radius with overflow hidden for the button:

.button {
  border-radius: 15%;
  overflow: hidden;
}

and make sure to use inner elements within your button like this:

<button class="button">
  <div class='content top'>
    BUY $EVZ
  </div>
  <div class='content bottom'>
    POWERED BY DEPAY.CASH
  </div>
</button>

Check out the final output here:

https://i.stack.imgur.com/m29vM.png

Answer №2

Check out this sample code. Feel free to customize the button style however you like.

button .top{
  background: #5675ff;
  color:white;
  font-size: 20px;
  padding: 5px 20px
}
button .bottom{
  background:#ccc;
  padding: 5px 20px
}
button{
  padding:0;
  border:0;
  border-radius:15px;
  overflow:hidden;
}
<button class="button">
  <div class="top">BUY X</div>
  <div class="bottom">I'm expensive!</div>
</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

Tips for ensuring browsers maintain the aspect ratio specified by width and height HTML attributes when CSS is applied

I am seeking a method to reserve space in my layout for images before they are loaded by adding width and height properties to the img element. This approach functions as anticipated: img { display: block; border: 1px solid tomato; } <img src="" ...

How can I make the top two divs stay fixed as I scroll down, and then reset back to their initial position when scrolled

Hey there, I'm looking to have a div stay fixed after scrolling within its parent div. <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> <div class="fw ofndr-box"> <div class="ofndr-box-half add-here"> <a href="#! ...

The Media Query Menu is not aligned in the center for smaller screens, functioning in both medium and extra-small sizes

@import url('https://fonts.googleapis.com/css?family=Dosis'); * { box-sizing: border-box; } /*Xtra Small */ body { font-family: 'Dosis', sans-serif; line-height: 1.618em; font-size: 18px; background: #383231; c ...

Organizing a Collection of Likes within an AngularJS Service

I have a like button on my profile page that, when clicked, should add the user's like to an array and store it in the database. Within my profile controller, I have the following code: $scope.likeProfile = UserService.likeProfile(loggedInUser,$stat ...

The dimensions of a Tumblr video

Hi there! I have a question regarding my tumblr theme. The space allocated for video posts on the home page is perfect, but when I click on the permalink, it becomes too small. I don't want to change the size of the video on the home page, so is there ...

Transforming a value within a controller into a directive

I am uncertain if I am approaching this correctly, but my goal is to convert a piece of code from a controller to a directive. The reason for this change is that I want to reuse the code with different values without creating multiple large object literals ...

Error in MongoDB Connection: Timeout issue caused by an unresolved Promise

Issue Overview Whenever I attempt to execute nodemon server, a timeout error is displayed indicating [nodemon] app crashed - waiting for file changes before starting.... Detailed Problem Description I have three files located at the following paths: ...

A step-by-step guide to displaying a label component upon clicking an AjaxLink

How can I display data from a JSON file when an AjaxLink is clicked? The code I have implemented is not working, so I would appreciate any corrections or suggestions. Additionally, I am wondering if it's possible to add a label inside AjaxLink. Thank ...

The JavaScript program is occasionally receiving unconventional input

I'm really struggling with this one. As part of a programming exercise, I am developing a JavaScript calculator. You can access the functioning calculator here on Codepen. At the bottom left corner of the calculator interface, you will notice a "+-" ...

What is the best way to toggle the color of the circle div in the center between yellow and white with every click within the circle?

Up to now, I have successfully accomplished this with just one click. I deleted the lightbulb image const sphere = document.getElementById("sphere"); sphere.addEventListener("click", event => { console.log("You clicked the ...

How to change a value within an array stored in local storage using Vanilla JavaScript?

I recently started learning vanilla JavaScript and followed a tutorial on creating a shopping cart. While the tutorial was helpful, it was cut short and I had to figure out how to update a value in a local storage array by clicking a button on my own. Can ...

What is the best way to format specific text as bold within an input text field?

I am attempting to make certain text bold within an input text field. However, I'm uncertain about how to achieve this because HTML code is not recognized inside a text field. Therefore, using <b> will not be effective. Is there a way to bold sp ...

Allowing Users to Easily Copy CSS ::before Content

Text inserted via pseudo-elements like ::before and ::after cannot be selected or copied. Is there a way to change this behavior? span::before { content: "including this text"; } <p> When the text of this paragraph is selected and copied, ...

Leveraging JavaScript along with the jQuery library and API to showcase information related to

Hey there! I have been working on this API that shows upcoming concerts, but I'm struggling to display the images associated with each concert. I've tried using for loops to iterate through the objects, and it seems like every sixth element has ...

Issue arises when the logo and navigation menu overlap upon zooming in

I'm facing a couple of issues with the menu on my website that I can't seem to resolve. The code appears to be correct, but the problem arises when a user zooms in on the website, particularly on netbooks. The website logo and the navigation menu ...

The Discord OAuth2 bot fails to assign roles to authenticated users

While working on OAuth2 login for my website, I encountered an issue. After a user successfully logs in through OAuth2, the bot should assign a role to them on my Discord server. However, when I tested the login process myself, the bot returned an error me ...

As the browser window is resized, the HTML div is causing the image to be clipped

Having an issue with the dynamic resizing of Divs containing Images in my HTML Table. The Challenge: The Image within a resizable Div gets clipped at the bottom when the height decreases due to window resizing. To view the problem, visit this Example Pag ...

sending the express application to the route modules

Currently, I am developing an express 4 api server with no front end code. Rather than structuring my project based on file types such as routes and models, I have decided to organize it around the business logic of the project. For example, within my Use ...

Arranging images next to each other using CSS and HTML

I've been trying to arrange four images side by side, with two on the top row and two on the bottom. I want to ensure they stay consistent across all browser sizes except for mobile. Here is what I have attempted so far: #imageone{ position: absol ...

Are you looking for a demonstration of "Creative Loading Effects" that triggers when the page is loaded?

I came across this demo for a preloader on my website called Creative Loading Effects, specifically the "3D Bar Bottom" effect, which I find very exciting. However, I noticed that it only loads when we press the button, and not automatically when the page ...