Unleash the power of CSS3 to style this button

I received an image of a button that I need to replicate on a website, but unfortunately, only the image was provided without any information about the font-family or size. Despite not being a designer or CSS expert, I attempted to create a CSS style that resembled the given image using CSS3.

.test
{
  border-top: 1px solid;
   background: #ebebeb;
   background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#ebebeb));
   background: -webkit-linear-gradient(top, #ebebeb, #ebebeb);
   background: -moz-linear-gradient(top, #ebebeb, #ebebeb);
   background: -ms-linear-gradient(top, #ebebeb, #ebebeb);
   background: -o-linear-gradient(top, #ebebeb, #ebebeb);
   padding: 5px 10px;
   -webkit-border-radius: 3px;
   -moz-border-radius: 3px;
   border-radius: 3px;
   -webkit-box-shadow: #ebebeb 0 1px 0;
   -moz-box-shadow: #ebebeb 0 1px 0;
   box-shadow: #ebebeb 0 1px 0;
   text-shadow: #ebebeb 0 1px 0;
   color: #4d4c4d;
   font-size: 12px;
   font-family: font-family: Arial,sans-serif;
   font-weight:lighter;
   text-decoration: none;
   vertical-align: middle;
}

However, I'm still struggling with getting the font size and background exactly right. Perhaps there are some CSS3 experts who can provide insight into what I might be missing to achieve an exact copy?

You can view my attempt on Fiddle here: http://jsfiddle.net/Fbpg6/

Answer №1

All the gradient styles are ineffective because the start and end colors are the same.

You have omitted some color declarations in various locations as well.

Check out THIS DEMO for a possible solution.

(Please note that I added margin just to create spacing away from the edges of the frame.)

Answer №2

This is the updated styling:

.new-style {
border: 1px solid;
background: #EBEBEB;
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#EBEBEB));
background: -webkit-linear-gradient(top, #EBEBEB, #EBEBEB);
background: -moz-linear-gradient(top, #EBEBEB, #EBEBEB);
background: -ms-linear-gradient(top, #EBEBEB, #EBEBEB);
background: -o-linear-gradient(top, #EBEBEB, #EBEBEB);
padding: 7px 15px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: #ebebeb 0 1px 0;
-moz-box-shadow: #ebebeb 0 1px 0;
text-shadow: white 1px 1px 0;
color: #4D4C4D;
font-size: 13px;
font-family: Arial,sans-serif;
font-weight: normal;
text-decoration: none;
vertical-align: middle;
border-image: initial;
border-color: #BBB;
}

Answer №3

To achieve a seamless transition from a PSD to browsers, it is essential to ensure that the gradients match perfectly. This can be done by using slightly larger fonts and selecting different colors.

.test
{
   border: 1px solid #cacaca;
   background-color: #ebebeb;
   background: -webkit-gradient(linear, left top, left bottom, from(#f0f0f0), to(#e3e3e3));
   background: -webkit-linear-gradient(top, #ebebeb, #ebebeb);
   background: -moz-linear-gradient(top, #f0f0f0, #e3e3e3);
   background: -ms-linear-gradient(top, #f0f0f0, #e3e3e3);
   background: -o-linear-gradient(top, #f0f0f0, #e3e3e3);
   padding: 5px 15px;
   -webkit-border-radius: 4px;
   -moz-border-radius: 4px;
   border-radius: 4px;
   text-shadow: #fff 0 1px 1px;
   color: #666;
   font-size: 14px;
   font-family: font-family: Arial,sans-serif;
   font-weight:lighter;
   text-decoration: none;
   vertical-align: middle;
}

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

Encountering an "Unmet Peer Dependency" error message while attempting to integrate bootstrap-ui into my Angular project

Currently, my goal is to successfully install angular-ui. Following the tutorials, I have attempted all commands such as: npm install angular-bootstrap However, this command results in an error message: +-- UNMET PEER DEPENDENCY angular@>=1.5 After ...

Enhancing text with custom gradient using CSS styling

I am facing an issue where uploading an image with text is not helpful for Google search visibility. I am looking to add a specific gradient style to my text. Could anyone assist me in achieving this particular text look that I have in mind? I came acros ...

A div element featuring a border with transparent edges on the top right and bottom left corners

Does anyone know how to code the border for the upper right corner and lower left corner of the box (as shown in the image below)? I would really appreciate some help. Thank you in advance! This is the HTML <div class="carouselle"> <div clas ...

How to adjust the size of the text on a button in jQuery mobile using custom

I am facing an issue with my jQuery mobile buttons that are placed inside a fieldset. Specifically, I need to adjust the font-size of one of the buttons. Despite attempting to add an inline style, it did not have the desired effect. Furthermore, I tried u ...

Inquiry regarding the grid structure within my react application

When attempting to arrange my images in a grid layout, I encountered a strange issue after applying CSS grid. The grids ended up being organized horizontally instead of how I wanted them to be - two or three images per line. The component hierarchy is as ...

What is the best way to make a dropdown button on a top navigation bar show as active using Semantic-ui?

I searched through the Semantic-ui documentation, but I couldn't find clear instructions on how to designate a dropdown item as 'active' (highlighted without being opened) in my top navbar menu, similar to regular items. The 'active&ap ...

Various lists do not appear directly under each other

Hello everyone, I recently created a webpage displaying different lists of football players. My goal is to keep the lists stacked vertically without any floats that would make them appear side by side. The separate lists are essential for properly categori ...

Retrieve the rendered component color variables exclusively from the global color variable file

color_variables.css: [data-theme='default'] { --avatar_bg: #000; --avatar_text: #fff; --avatar_border: red; --button_bg: blue; --button_text: #fff; --button_border: darkblue; --modal_widget_bg: orange; --footer_bg: yellow; --foo ...

Tips on prefixing Bootstrap 4 classes to prevent conflicts with CSS classes

Recently, I've been focusing on creating small applications for websites. The websites hosting these apps may or may not use a css framework. To prevent any potential conflicts, I have decided to add a unique prefix to all Bootstrap classes. For insta ...

How to Blend Pseudo-classes in CSS?

If I want the selected text in a link to turn red when hovered over, can I achieve that using the following CSS code? .abc:hover::selection {color: red;} Also, if I have the following link: <a href="123" class="abc">4567890</a ...

Unable to click on hyperlink and image not adjusting in size

I am having an issue with the anchor tags inside a div. For some reason, the width and height are set to 0px, and I have tried to adjust them with no success. Each dot in my onepage scroller is meant to navigate to a different page. .dotstyle-scaleup{ f ...

Achieving Flexbox compatibility with child elements in a horizontal MUI Collapse Component and TransitionGroup transitions: A comprehensive guide

Struggling with incorporating the Collapse + TransitionGroup Component in MUI while trying to make the containers expand using flexbox. <Box sx={{display: 'flex', height: '100vh', width: '100vw'}}> <Box sx={{flex: 1 ...

jQuery Masonry now renders "row blocks" as opposed to trying to fit elements into place

Have you ever heard of the jQuery masonry plugin? It's a great tool for placing images in "blocks" instead of trying to squeeze them into empty spaces. Take a look at this explanation: But how can we minimize those pesky "voids"? HTML: <!-- This ...

CSS hover effects are not displayed when using the input type button

I'm having issues with my hover effects not showing: <input type="button" class="button" value="Click"> However, this code works fine: <button class="button">Click</button> The CSS codes are ...

How can I prevent an image from moving in relation to other objects on a webpage using HTML?

I'm currently working on my HTML website and facing a layout issue. I have an image in the center of the screen, but I want to add text beside it on the right side. Every time I try to do this, the image moves down, which is frustrating. I'm not ...

Refresh the CSS without having to reload the entire page

I am working on a web page that operates on a 60-second timer. The code snippet below is responsible for updating the content: protected void RefreshButton_Click(object sender, EventArgs e) { ReportRepeater.DataBind(); ReportUpdatePane ...

It appears that the font in style.css is not being updated properly and seems to resemble

My issue lies within my CSS code. The text on my website is not displaying correctly and seems to be ignoring the styling that I have applied. Even though I have used similar styling on other buttons which look fine, this specific text element is causing p ...

Encountered an issue locating the stylesheet file 'css/style.css' that is supposed to be linked from the template. This error occurred when trying to integrate Bootstrap with Angular

<link rel="stylesheet" href="plugins/bootstrap/bootstrap.min.css"> <link rel="stylesheet" href="plugins/owl-carousel/owl.carousel.css"> <link rel="stylesheet" href="plugins/magnific-pop ...

Avoiding the inclusion of special characters in symfony css selectors, or utilizing wildcard characters for more

Currently, I am utilizing the Symfony\Component\DomCrawler\Crawler component in order to locate a form that contains a name with various CSS special characters. <input name="myfield[0].thing"> In my code, I have: $messageElement = $ ...

How can we consolidate an excess of menu items into a condensed, collapsed menu?

I have a navigation bar displaying category items, but if the menu items exceed the navbar width, how can I condense them into a drop-down menu using Bootstrap 3.0? Currently, my navbar only shows 10 items due to limited space. However, I have more items ...