css文本输入框中加入按钮

html-css055

css文本输入框中加入按钮,第1张

首先你的按钮和文本框都是在各自的div里,而不是同层,所以对他们设置float无效,要对他们外面那个div设置float。其次你怎么可以加fieldset div{clear:leftmargin-bottom:2px},这里的clear:left会让所以的div强制换行的。

所以方法很简单,将fieldset div{clear:leftmargin-bottom:2px}改为

fieldset div{float:leftmargin-bottom:2px}即可,即clear改为float即可。

附:input右边有些剪切,因为有padding:1px,所以宽度99%太大,改小点比如95%即可。

给按钮添加css样式有以下三种方法:

1,直接在元素上定义style,如下:

<input type="button" style="这里定义样式">

2,页面中内嵌样式,如下:

<style>

    .btn{需要添加的样式}

</style>

<input type="button" class="btn">

3,外部引用css文件,如下:

<link rel="stylesheet" type="text/css" href="这里是css文件的路径">

定义一个如图所示的矩形按钮

为其添加两个伪元素

添加伪类hover:

transition 属性是一个简写属性,用于设置四个过渡属性:

transition-property:规定设置过渡效果的 CSS 属性的名称。

transition-duration:规定完成过渡效果需要多少秒或毫秒。

transition-timing-function:规定速度效果的速度曲线。

transition-delay:定义过渡效果何时开始。

tips:请始终设置 transition-duration 属性,否则时长为 0,就不会产生过渡效果。

transition-timing-function:

伪元素默认的宽高为0,当鼠标悬浮时候,设置一定的过渡时间使其宽高为100%。

上述demo中:

在0.2s内 border-top-color变化,border-right-color推迟0.2s之后完成一个0.2s的过渡。

同理border-bottom-color推迟0.4s,border-left-color推迟0.6s.

demo