The only problem with pure CSS buttons is that they look rather monotonous, with only a fixed color background and a simple boundary. One workaround is to add a background image to a CSS-style text button using a hybrid technique, so that it has a 3D effect. However, the reader's email prompted me to look for a way to create a 3D button effect using pure CSS-no images needed. I found that there are two ways to create the appearance of beveled edges by controlling the style of CSS button boundaries.
Create Bevel Edge Effect
To make a button have a 3D bevel edge effect, you need to simulate a light source to create highlights and shaded areas at the edge of a raised button. If the light source is slightly above the left side of the button, the top and left sides of the button will be brighter than the button surface, and the bottom and right side will be darker than the button surface.
So the secret to creating a three-dimensional effect is to use a CSS boundary to simulate the side of the button and to use a slightly different color for each boundary, depending on whether it represents the side of the light or the dark side of the color scheme. In order to look more realistic, the boundary should have a miter angle, and CSS boundaries would be a good fit for this need.
Method 1 : Use Inset/outset (embedded line / Surfacing Line ) Border
A CSS boundary property can automatically produce a reasonable edge simulation effect. You only have to specify inset or outset for the Border-style property of the button style. The browser will use a slightly different background color shadow to handle the performance details of the element boundaries to get the desired results. The outset property simulates the shadow edge of the raised button, and theinset property simulates the scene where the button is pressed by reversing the shadow.
Figure A shows the actual inset/outset boundary effect. This example is generated by some very simple code. XHTML is very simple and contains only a few button labels and links
The following is a reference fragment:
<body>
<div id= "Buttona" >
<ul>
<li><a href= "link1.html" >button 1</a></li>
<li><a href= "link2.html" >button 2</a></li>
<li><a href= "link3.html" >button 3</a></li>
</ul>
</div>
</body> a total of 4 pages. 1 2 3 4 8:
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
