Shulou(Shulou.com)06/01 Report--

This article will explain in detail how to achieve different button styles in css. The editor thinks it is very practical, so I share it with you for reference. I hope you can get something after reading this article.

In the process of web design, programmers often need to cooperate with artists to design the aesthetic effect of the page, of course, most of the page style is the work of artists. But the button button style is the most commonly used by us programmers.

Note: in the source code, a variety of html tags are used to make buttons, including a menagerie input, span, Divrec, ppjinh4. There is always a label that suits you.

The source code of button style is as follows:

Demo:CSS3Buttons

Body {

Background:#ededed

Width:900px

Margin:30pxauto

Color:#999

}

P {

Margin:002em

}

H2 {

Margin:0

}

A {

Color:#339

Text-decoration:none

}

A:hover {

Text-decoration:underline

}

Div {

Padding:20px0

Border-bottom:solid1px#ccc

}

/ * button

-* /

.button {

Display:inline-block

Zoom:1;/*zoomand*display=ie7hackfordisplay:inline-block*/

* display:inline

Vertical-align:baseline

Margin:02px

Outline:none

Cursor:pointer

Text-align:center

Text-decoration:none

Font:14px/100%Arial,Helvetica,sans-serif

Padding:.5em2em.55em

Text-shadow:01px1pxrgba (0penny 0penny .3)

-webkit-border-radius:.5em

-moz-border-radius:.5em

Border-radius:.5em

-webkit-box-shadow:01px2pxrgba (0pd0re0pc.2)

-moz-box-shadow:01px2pxrgba (0pd0re0pc.2)

Box-shadow:01px2pxrgba (0J. 0J. 2)

}

.button: hover {

Text-decoration:none

}

.button: active {

Position:relative

Top:1px

}

.bigrounded {

-webkit-border-radius:2em

-moz-border-radius:2em

Border-radius:2em

}

.medium {

Font-size:12px

Padding:.4em1.5em.42em

}

.small {

Font-size:11px

Padding:.2em1em.275em

}

/ * colorstyles

-* /

/ * black*/

.black {

Color:#d7d7d7

Border:solid1px#333

Background:#333

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 666), to (# 000))

Background:-moz-linear-gradient (top,#666,#000)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#666666',endColorstr='#000000')

}

.black: hover {

Background:#000

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 444), to (# 000))

Background:-moz-linear-gradient (top,#444,#000)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#444444',endColorstr='#000000')

}

.black: active {

Color:#666

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 000), to (# 444))

Background:-moz-linear-gradient (top,#000,#444)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#000000',endColorstr='#666666')

}

/ * gray*/

.gray {

Color:#e9e9e9

Border:solid1px#555

Background:#6e6e6e

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 88), to (# 575757))

Background:-moz-linear-gradient (top,#888,#575757)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#888888',endColorstr='#575757')

}

.gray: hover {

Background:#616161

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 757575), to (# 4b4b4b))

Background:-moz-linear-gradient (top,#757575,#4b4b4b)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#757575',endColorstr='#4b4b4b')

}

.gray: active {

Color:#afafaf

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 575757), to (# 888))

Background:-moz-linear-gradient (top,#575757,#888)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#575757',endColorstr='#888888')

}

/ * white*/

.white {

Color:#606060

Border:solid1px#b7b7b7

Background:#fff

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# fff), to (# ededed))

Background:-moz-linear-gradient (top,#fff,#ededed)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff',endColorstr='#ededed')

}

.white: hover {

Background:#ededed

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# fff), to (# dcdcdc))

Background:-moz-linear-gradient (top,#fff,#dcdcdc)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#ffffff',endColorstr='#dcdcdc')

}

.white: active {

Color:#999

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# ededed), to (# fff))

Background:-moz-linear-gradient (top,#ededed,#fff)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#ededed',endColorstr='#ffffff')

}

/ * orange*/

.orange {

Color:#fef4e9

Border:solid1px#da7c0c

Background:#f78d1d

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# faa51a), to (# f47a20))

Background:-moz-linear-gradient (top,#faa51a,#f47a20)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#faa51a',endColorstr='#f47a20')

}

.orange: hover {

Background:#f47c20

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# f88e11), to (# f06015))

Background:-moz-linear-gradient (top,#f88e11,#f06015)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#f88e11',endColorstr='#f06015')

}

.orange: active {

Color:#fcd3a5

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# f47a20), to (# faa51a))

Background:-moz-linear-gradient (top,#f47a20,#faa51a)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#f47a20',endColorstr='#faa51a')

}

/ * red*/

.red {

Color:#faddde

Border:solid1px#980c10

Background:#d81b21

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# ed1c24), to (# aa1317))

Background:-moz-linear-gradient (top,#ed1c24,#aa1317)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#ed1c24',endColorstr='#aa1317')

}

.red: hover {

Background:#b61318

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# c9151b), to (# a11115))

Background:-moz-linear-gradient (top,#c9151b,#a11115)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#c9151b',endColorstr='#a11115')

}

.red: active {

Color:#de898c

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# aa1317), to (# ed1c24))

Background:-moz-linear-gradient (top,#aa1317,#ed1c24)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#aa1317',endColorstr='#ed1c24')

}

/ * blue*/

.blue {

Color:#d9eef7

Border:solid1px#0076a3

Background:#0095cd

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 00adee), to (# 0078a5))

Background:-moz-linear-gradient (top,#00adee,#0078a5)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#00adee',endColorstr='#0078a5')

}

.blue: hover {

Background:#007ead

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 0095cc), to (# 00678e))

Background:-moz-linear-gradient (top,#0095cc,#00678e)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#0095cc',endColorstr='#00678e')

}

.blue: active {

Color:#80bed6

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 0078a5), to (# 00adee))

Background:-moz-linear-gradient (top,#0078a5,#00adee)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#0078a5',endColorstr='#00adee')

}

/ * rosy*/

.rosy {

Color:#fae7e9

Border:solid1px#b73948

Background:#da5867

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# f16c7c), to (# bf404f))

Background:-moz-linear-gradient (top,#f16c7c,#bf404f)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#f16c7c',endColorstr='#bf404f')

}

.rosy: hover {

Background:#ba4b58

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# cf5d6a), to (# a53845))

Background:-moz-linear-gradient (top,#cf5d6a,#a53845)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#cf5d6a',endColorstr='#a53845')

}

.rosy: active {

Color:#dca4ab

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# bf404f), to (# f16c7c))

Background:-moz-linear-gradient (top,#bf404f,#f16c7c)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#bf404f',endColorstr='#f16c7c')

}

/ * green*/

.green {

Color:#e8f0de

Border:solid1px#538312

Background:#64991e

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 7db72f), to (# 4e7d0e))

Background:-moz-linear-gradient (top,#7db72f,#4e7d0e)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#7db72f',endColorstr='#4e7d0e')

}

.green: hover {

Background:#538018

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 6b9d28), to (# 436b0c))

Background:-moz-linear-gradient (top,#6b9d28,#436b0c)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#6b9d28',endColorstr='#436b0c')

}

.green: active {

Color:#a9c08c

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# 4e7d0e), to (# 7db72f))

Background:-moz-linear-gradient (top,#4e7d0e,#7db72f)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#4e7d0e',endColorstr='#7db72f')

}

/ * pink*/

.pink {

Color:#feeef5

Border:solid1px#d2729e

Background:#f895c2

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# feb1d3), to (# f171ab))

Background:-moz-linear-gradient (top,#feb1d3,#f171ab)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#feb1d3',endColorstr='#f171ab')

}

.pink: hover {

Background:#d57ea5

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# f4aacb), to (# e86ca4))

Background:-moz-linear-gradient (top,#f4aacb,#e86ca4)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#f4aacb',endColorstr='#e86ca4')

}

.pink: active {

Color:#f3c3d9

Background:-webkit-gradient (linear,lefttop,leftbottom,from (# f171ab), to (# feb1d3))

Background:-moz-linear-gradient (top,#f171ab,#feb1d3)

Filter:progid:DXImageTransform.Microsoft.gradient (startColorstr='#f171ab',endColorstr='#feb1d3')

}

CSS3GradientButtons

ByWebDesignerWall

Rectangleor

RoundedCanbe

Mediumor

Small

ButtonTag

Span

Div

PTag

H3

Gray

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

White

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

Orange

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

Red

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

Blue

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

Rosy

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

Green

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

Pink

Rounded

Medium

Small

ButtonTag

Span

Div

PTag

H3

On "how to achieve different button styles in css" this article is shared here, I hope the above content can be of some help to you, so that you can learn more knowledge, if you think the article is good, please share it out for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.