号召性用语按钮图片（想要没有 1px 实线的结果）该按钮的 HTML 和 CSS 代码是什么？需要是容器的全宽并且具有响应能力。.btn{
width: 100%;
padding: 18px 15px;
background: none;
border-radius: 2px;
color: #111;
font-size: 16px;
font-weight: 600;
border: 2px solid 111;}
3 回答
暮色呼如
TA贡献1853条经验 获得超9个赞
我认为这会有所帮助
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src='https://kit.fontawesome.com/a076d05399.js'></script>
<style>
#div1 {
box-sizing: border-box;
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
#btn1{
vertical-align: middle;
cursor: pointer;
user-select: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 95, 201);
display: inline-block;
font-size: 19px;
line-height: 1.45;
padding-top: 12px;
padding-bottom: 12px;
font-family: "Urban Grotesk", "Helvetica Neue", sans-serif;
text-align: center;
padding-left: 32px;
padding-right: 32px;
text-decoration: none;
border-color: rgb(0, 95, 201);
border-width: 2px;
border-style: solid;
border-radius: 9999px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s !important;
}
#btn2{
width: 100%;
vertical-align: middle;
cursor: pointer;
user-select: none;
color: rgb(255, 255, 255);
background-color: rgb(0, 95, 201);
display: inline-block;
font-size: 19px;
line-height: 1.45;
padding-top: 12px;
padding-bottom: 12px;
font-family: "Urban Grotesk", "Helvetica Neue", sans-serif;
text-align: center;
padding-left: 32px;
padding-right: 32px;
text-decoration: none;
border-color: rgb(0, 95, 201);
border-width: 2px;
border-style: solid;
border-radius: 9999px;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) 0s !important;
}
.gkIVBh {
box-sizing: border-box;
margin-left: auto;
margin-right: auto;
padding-left: 16px;
padding-right: 16px;
max-width: 1000px;
}
@media screen and (min-width: 32em){
.jeGMXo {
margin-bottom: 60px;
}
}
.jeGMXo {
box-sizing: border-box;
margin-bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 80px, rgba(0, 0, 0, 0.1) 0px 3px 10px;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
background-color: rgb(245, 248, 249);
padding: 20px;
border-radius: 10px;
transition: background-color 100ms ease-out 0s;
text-decoration: none;
}
.dVEcjR {
box-sizing: border-box;
-webkit-box-align: center;
align-items: center;
display: flex;
}
.cjNzCs {
padding-left: 10px;
margin-top: 0px;
color: rgb(11, 22, 63);
font-size: 14px;
line-height: 20px;
}
.bgMUcD {
width: 24px;
height: 24px;
color: rgb(11, 22, 63);
flex: 0 0 auto;
}
.ggXKIR {
width: 24px;
height: 24px;
color: rgb(11, 22, 63);
flex: 0 0 auto;
}
.btn3{
vertical-align: middle;
border: 3px solid #1aa3cc;
border-radius: 5px;
padding: 20px;
background-color: transparent;
}
.vl {
border-left: 1px solid #1aa3cc;
height: 20px;
padding: 10px;
}
</style>
</head>
<div id="div1">
<button id="btn1">Last ned appen</button>
</div>
<div id="div1">
<button id="btn2">Last ned appen</button>
</div>
<div class="gkIVBh">
<a href="https://www.facebook.com/bysykkeloslo/" class="jeGMXo">
<div class="dVEcjR">
<svg fill="currentColor" viewBox="0 0 24 24" size="24" color="text" class="sc-AykKC bgMUcD">
<path fill="currentColor" d="M8.515 7.847H6v4.105h2.515V24h4.832V11.897h3.371l.357-4.05h-3.728v-2.31c0-.952.192-1.336 1.117-1.336h2.618V0h-3.345C10.14 0 8.522 1.583 8.522 4.612c-.007 2.646-.007 3.235-.007 3.235z"></path>
</svg>
<div color="text" font-size="[object Object]" class=" cjNzCs">
<font style="vertical-align: inherit;"><font style="vertical-align: inherit;">Get the latest city bike news on our Facebook page</font></font>
</div>
</div>
<svg fill="currentColor" viewBox="0 0 24 24" color="text" class="sc-AykKC ggXKIR">
<path fill="currentColor" fill-rule="evenodd" d="M7.118 21.585a1.333 1.333 0 01.048-1.885l8.21-7.7-8.21-7.7a1.333 1.333 0 011.837-1.933L19.248 12 9.004 21.633a1.333 1.333 0 01-1.885-.048z" clip-rule="evenodd"></path>
</svg>
</a>
</div>
<div id="div1">
<button class="btn3">
<span style="padding:10px;color:#1aa3cc;font-size: 120%;">Call to Action</span>
<span class="vl"></span>
<span class="fa fa-arrow-right" style="padding:10px;font-size:24px;color:#1aa3cc"></span>
</button>
</div>
</html>
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="https://arbeidsplassen.nav.no/css/app.css" rel="stylesheet">
<style>
.div1{
margin: 30px;
}
</style>
</head>
<body>
<div class="div1">
<a href="/stillinger" class="Hovedinngang">
<div class="Hovedinngang__left">
<div class="Hovedinngang__icon Hovedinngang__icon--green">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<g stroke="#062140" stroke-linejoin="round" stroke-miterlimit="10" fill="none">
<circle cx="8.5" cy="8.5" r="8"></circle>
<path stroke-linecap="round" d="M14.156 14.156l9.344 9.344"></path>
</g>
</svg>
</div>
</div>
<div class="Hovedinngang__center">
<h3 class="Hovedinngang__title"><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">
searching for positions
</font></font></h3>
</div>
<div class="Hovedinngang__right">
<i class="Hovedinngang__chevron"></i>
</div>
</a>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>
</title>
<style>
.Hovedinngang {
width: 50%;
color: #062140;
padding: 1.5rem;
display: flex;
align-items: center;
border: 1px solid #062140;
border-radius: 0.25rem;
}
.Hovedinngang__title {
font-size: 1.125rem;
line-height: 1.33;
font-weight: 600;
margin: 0;
}
</style>
</head>
<body>
<a class="Hovedinngang">
<div style="flex: 1;">
<div class="Hovedinngang__title">
Søk etter stillinger
</div>
</div >
<div style="float:right;padding-right: 20px;">
<i class="material-icons" style="font-size: 30px;">keyboard_arrow_right</i>
</div>
</a>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<title>
</title>
<style>
#btn1 {
width: 50%;
align-items: center;
padding: 1.5rem;
background-color:transparent;
color: black;
outline: 0px;
border:1px solid black;
border-radius: 3px;
}
</style>
</head>
<body>
<br>
<button id="btn1"><span style="font-size: 24px;">Søk etter stillinger</span><i class="material-icons" style="font-size: 30px;float: right;">keyboard_arrow_right</i></button>
</body>
</html>
潇湘沐
TA贡献1816条经验 获得超6个赞
HTML：
<a href="#" class="sc-AykKD Footer__StyledCallOutAnchor-sc-1mqnblr-3 jeGMXo">
<svg fill="currentColor" viewBox="0 0 24 24" color="text">
<path fill="currentColor" fill-rule="evenodd" d="M7.118 21.585a1.333 1.333 0 01.048-1.885l8.21-7.7-8.21-7.7a1.333 1.333 0 011.837-1.933L19.248 12 9.004 21.633a1.333 1.333 0 01-1.885-.048z" clip-rule="evenodd">
</path>
</svg>
</a>
其中“a”CSS：
box-sizing: border-box;
margin-bottom: 40px;
box-shadow: rgba(0, 0, 0, 0.08) 0px 0px 80px, rgba(0, 0, 0, 0.1) 0px 3px 10px;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: justify;
justify-content: space-between;
background-color: rgb(245, 248, 249);
padding: 20px;
border-radius: 10px;
transition: background-color 100ms ease-out 0s;
text-decoration: none;
和“svg”CSS：
width: 24px;
height: 24px;
color: rgb(11, 22, 63);
flex: 0 0 auto;
至尊宝的传说
TA贡献1789条经验 获得超10个赞
删除了按钮类，我将其更改为链接类。所以我做了这样的：
CSS
.start {
display: block;
max-width: 1130px;
text-align: center;
background: #dbf0fa;
border-radius: 4px;
padding: 20px;
margin: -75px auto -16px auto}
超文本标记语言
<p><a class="start" href="link here">text here</a></p>
这是正确的做法吗？
我仍然缺少向右浮动的箭头。
- 3 回答
- 0 关注
- 123 浏览
添加回答
举报
0/150
提交
取消