Кнопка призыва к действию со стрелкой - PullRequest
Новая
       0

Кнопка призыва к действию со стрелкой

0 голосов
/ 01 апреля 2020

Изображение кнопки «Призыв к действию» (хотите получить этот результат без строки 1px solid)

Что такое код 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 ]

0 голосов
/ 01 апреля 2020

Я думаю, что это поможет 

<!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>

Это то, что вы хотите

0 голосов
/ 02 апреля 2020

Добавлен класс кнопок, я изменил его на класс ссылок. Поэтому я сделал это так:

CSS

.start {
 display: block; 
 max-width: 1130px;
 text-align: center;
 background: #dbf0fa;
 border-radius: 4px;
 padding: 20px;
 margin: -75px auto -16px auto}

HTML

<p><a class="start" href="link here">text here</a></p>

Это правильный способ сделать это?

Мне все еще не хватает стрелки, плавающей вправо. Используя эти стрелки: https://www.toptal.com/designers/htmlarrows/arrows/

0 голосов
/ 01 апреля 2020

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;
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...