Чистые CSS кнопки - PullRequest
Новая
       2

Чистые CSS кнопки

3 голосов
/ 16 августа 2010

Может кто-нибудь показать мне некоторые учебники, которые делают кнопку в CSS и не требуют изображений?Я гуглил это, но все включало изображения ...

Спасибо!

Ответы [ 7 ]

3 голосов
/ 16 августа 2010

Если я вас правильно понимаю, вы хотите, чтобы произвольный элемент выглядел как кнопка?

Ну ... просто напишите CSS соответственно!Вот пример запуска, который делает ссылку похожей на кнопку: 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3489881</title>
        <style>
            a.button {
                display: inline-block;
                padding: 0 2px;
                background: lightgray;
                border: 2px outset lightgray;
                cursor: default;
            }
            a.button:active {
                border-style: inset;
            }
        </style>
    </head>
    <body>
        <p><a class="button">link</a>
    </body>
</html>
3 голосов
/ 16 августа 2010

Гм, определить "кнопку"?Если вам нужна просто базовая кнопка, вам даже не нужен CSS, просто используйте ввод HTML или тег кнопки ... 

<input type="button" value="Press me!" />

или 

<button>Press me!</button>
1 голос
/ 26 января 2014

Этот вид довольно скучный, но он делает свое дело! 

h1 {
    font-family: Arial;
}
a {
    display: inline-block;
    padding: 2 5px;
    background: lightgray;
    border: 5px outset lightgray;
    cursor: default;
    text-decoration:none;
    color: black;
}
a:hover {
    background: gray;
}
0 голосов
/ 06 сентября 2017

Это выглядит прекрасно, по мне :) 1001 

.button {
    color: rgba(255, 255, 255, 1);
    background-color: rgba(61, 51, 119, 1);
    font-weight: 500;
    padding: 9px;
    box-shadow: 0px 5px 0px rgba(31, 36, 78, 1), 0px 9px 12px rgba(0, 0, 0, .7);
    width: 160px;
    text-align: center;
    transition: all .3s ease;
    font-size: 15px;
    border: none;
    border-radius: 5px;
    outline: none;
    margin: auto;
    font-family: "Century Gothic";
    transform: scale(0.9);
}
.button:active {
    box-shadow: 0px 2px 0px rgba(31, 36, 78, 1), 0px 2px 4px rgba(0, 0, 0, .9);
    top: 6px;
    transform: scale(0.9) translateY(3px);
}

<input class = 'button' type = 'button' value = 'Click' />
0 голосов
/ 05 мая 2015

Это очень простой дизайн, но выглядит довольно хорошо 

body {
  font-family: Helvetica, sans-serif;
  font-size: .8rem;
}

.button {
  text-align: center;
  
  background-color: #888;
  border-top: 0px solid #fff; /*define the color of the upper border */
  border-bottom: 3px solid #666;
  border-radius: 2px;
}
.button:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button:active {
    border-top-width: 2px; /* add this so it gets 'pushed down' */
    border-bottom-width: 1px;
}
.button a {
  color: #fff;
  display: block;
  text-decoration: none;
  padding: .2rem;
}

/* Second button */
.button-link {
  text-align: center;
  color: #fff;
  display: block;
  text-decoration: none;
  padding: .2rem;
  
  background-color: #888;
  border-top: 0px solid #fff; /*define the color of the upper border */
  border-bottom: 3px solid #666;
  border-radius: 2px;
}
.button-link:hover {
    box-shadow: inset 0 0 100px 100px rgba(255, 255, 255, 0.1); /* light overlay */
}
.button-link:active {
    border-top-width: 2px; /* add this so it gets 'pushed down' */
    border-bottom-width: 1px;
}
<div class="button"><a href="#">Click me</a></div><br/>
<a class="button-link" href="#">Click me, link only</a>
0 голосов
/ 23 июля 2011

Здесь есть несколько замечательных примеров - Кнопки Pure CSS - кнопок, которые не нуждаются в изображениях, но являются законными. Я думаю, что вы могли бы добавить некоторые градиенты для некоторых из них, но в остальном они выглядят точно так же, как в Facebook, Twitter, Wordpress и т. Д. Если вы не знаете много CSS, я бы посоветовал вам скопировать один из примеры.

0 голосов
/ 16 августа 2010

CSS: 

.button{
     background-color: #000;
     color: #FF6600;
     font: bolder 1.0em Tahoma;
     border: 1px solid Yellow;
     padding: 2px;
}
.button:hover{
    border: 1px solid Red;   
}

HTML: 

<input type="button" class="button" value="Button"/>
<input type="button" class="button" value="Another"/>

Попробуйте: http://jsfiddle.net/eD9sf/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...