The CSS pseudo class allows you to set the status of a link (link <link>, accessed <visited>, hovering Create slope Edge Effect
To make a button have a 3D inclined edge effect, you need to simulate a light source to create a bright area and a shadow area on the edge of a raised button. If the light source is slightly biased towards the left side of the button above, the top and left sides of the button will be compared with the button
The surface is brighter, and the bottom and right sides are darker than the button surface.
Therefore, the secret to creating a 3D effect is to use the CSS border to simulate the side of the button and use a slightly different color for each border, the specific color scheme depends on whether it represents a bright side or a dark side. To view
The CSS boundary can better meet this requirement.
Method 1: Use inset/outset (embedded line/surfaced line) boundary.
There is a CSS boundary attribute that automatically produces a reasonable slope edge simulation effect. You only need to specify the border-style attribute of the button style as inset or outset. The browser will handle it with a slightly different background color shadow.
The display details of the element boundary to get the expected results. The outset attribute simulates the shadow edge of the raised button. The inset attribute reverses the shadow to simulate the context where the button is pressed.
Demonstrate the actual inset/outset boundary effect. This example is generated by some very simple code. XHTML is very simple and only contains some button labels and links.
<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>
CSS styles make this method very similar to the style for designing common flat buttons. The only difference here is that the border-style: outset and border-style: Inset rules are used in combination with the border-width setting.
To make it visible.
Body {
Margin: 0px;
Padding: 0px;
}
Div # buttona {
Margin-left: 50px;
}
Div # buttonaul {
Margin: 0px;
Padding: 0px;
Font-family: verdana, Arial, Helvetica, sans-serif;
Font-size: 12px;
Line-Height: 30px;
}
Div # buttonali {
List-style-type: none;
Height: 30px;
Width: 125px;
Margin: 20px;
Text-align: center;
}
Div # buttonali {
Height: 100%;
Width: 100%;
Display: block;
Text-Decoration: none;
Border-width: 6px;
}
Div # buttonalia: link {
Color: #000000;
Font-weight: bold;
Background-color: # cccccc;
Border-style: outset;
}
Div # buttonalia: visited {
Color: #000000;
Font-weight: normal;
Background-color: # cccccc;
Border-style: outset;
}
Div # buttonalia: hover {
Font-weight: bold;
Color: # ffffff;
Background-color: #999999;
Border-style: outset;
}
Div # buttonalia: Active {
Font-weight: bold;
Color: # ffffff;
Background-color: #666666;
Border-style: inset;
}
// Wing QQ: 272912705 www.hi.baidu.com/jcomet
Div # buttonaul rules set the size and spacing of regular text. Div # The buttonali rule removes the default project symbol (list-style-type: None) of the list items and sets the size of the button box. Div # make the entire
You can click the button (Height: 100%; width: 100%; display: block;) to easily set the Border width.
The rest of the style controls the appearance changes of different button states. All pseudo classes (: Link,: visited,: hover, And: active) have a color, font-weight, background-color, and border-style rule. Division
Div # buttonalia: All styles except the active rule use the border-style: outset rule, and Div # buttonalia: active uses the border-style: Inset rule. In this way, the button status has a raised appearance-
-Unless the button is clicked, the button is displayed in the pressed state.
Different browsers present inset and outset boundaries in a very different way. Internet Explorer creates more refined effects. There is a bright area on the inner edge of each border, and a shadow area on the outer edge. The other side
Surface, Netscape presents each border with a fixed color, which produces a relatively abrupt side, not smooth appearance.
Method 2: control a single side
Using inset/outset border styles is a simple and quick way to simulate 3D effects. However, this is not the only method. If you do not like the standard effect, or you are troubled by the differences in browser performance, you can
Use your own border color to produce the desired effect.
In addition to the inset/outset attribute that can be border-style and the actual color that allows the browser to process each border, you can also use your own style rules to set a color for each border.
Figure B shows the results of using a style sheet that specifies the colors of each button side individually. The markup is the same as in Figure A. Here's
The CSS code:
Figure B shows the 3D button effect obtained using this method. Here, the style sheet separately specifies the color of each button side. The markup used in Figure B is the same as that in Figure A. The following is the CSS code:
Body {
Margin: 0px;
Padding: 0px;
}
Div # buttona {
Margin-left: 50px;
}
Div # buttonaul {
Margin: 0px;
Padding: 0px;
Font-family: verdana, Arial, Helvetica, sans-serif;
Font-size: 12px;
Line-Height: 30px;
}
Div # buttonali {
List-style-type: none;
Height: 30px;
Width: 125px;
Margin: 10px;
Text-align: center;
}
Div # buttonali {
Text-Decoration: none;
Height: 100%;
Width: 100%;
Display: block;
Background-color: #999999;
Border-style: solid;
Border-bottom-color: #333333;
Border-right-color: #555555;
Border-left-color: # bbbbbb;
Border-top-color: # dddddd;
}
Div # buttonalia: link {
Color: #000000;
Font-weight: bold;
Background-color: #999999;
Border-style: solid;
Border-bottom-color: #333333;
Border-right-color: #555555;
Border-left-color: # bbbbbb;
Border-top-color: # dddddd;
}
Div # buttonalia: visited {
Color: #000000;
Font-weight: normal;
Background-color: #999999;
Border-style: solid;
Border-bottom-color: #333333;
Border-right-color: #555555;
Border-left-color: # bbbbbb;
Border-top-color: # dddddd;
}
Div # buttonalia: hover {
Font-weight: bold;
Color: # ffffff;
Background-color: #777777;
Border-style: solid;
Border-bottom-color: #333333;
Border-right-color: #555555;
Border-left-color: # bbbbbb;
Border-top-color: # dddddd;
}
Div # buttonalia: Active {
Font-weight: bold;
Color: # ffffff;
Background-color: #666666;
Border-style: solid;
Border-top-color: #333333;
Border-left-color: #555555;
Border-right-color: # bbbbbb;
Border-bottom-color: # dddddd;
}
Although this code is obviously longer than the CSS code in the previous example, it is not the main difference between the two. The main difference between them is that a border-style: solid rule is used to replace the original border-style:
Outset (or border-style: Inset) Rules, followed by several rules to set the color of each border (border-top-color: # dddddddd ).
With this method, you can completely control the side color of the button. That is to say, it is up to you to choose the right color to get the effect you want -- and you also need to remember to change the color so that the button is generated when it is in the active state.
The effect of being pressed. The advantage of controlling these details is that you can set the color of the independent side and the highlighted area on the top, and the final result is more consistent across all browsers.
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
